js节流函数中的参数传递
以下内容，都是本⼈⾃⼰思考所得，不免存在很多问题，欢迎⼤家指正或者提供更好的解决⽅法。
在开发中，遇到这样⼀个问题：拍摄地点列表，⽤户如果在短时间内多次点击同⼀个地点时，将会添加多个同名地点。
很显然，这不是我们想要的结果。然后就上⽹搜了⼀下，知道了⼀个新的概念，函数节流（在这⾥，这个理解是错误的，应该是函数去抖，这个后⾯再说）。
在这⾥主要参照了博客园谦⾏的这篇⽂章：
这边⽂章主要讲述了⽆参数函数的节流，并提供了两种实现⽅式。⽽我在这⾥想要说的是这实际开发中，我遇到的含参数节流问题以及这⼀过程中产⽣的其他问题。
⾸先，先说明含参函数的传递⽅式：1.构造匿名函数 2.参数和⽅法分开传递 （）
在这⾥，我也按照谦⾏的两种实现⽅式来分别说明：
第⼀种⽅式：
js arguments
function throttle(method, context) {
clearTimeout(method.tId);
method.tId = setTimeout(function() {
method.apply(context);
}, 500);
}
这⾥很容易看出，构造匿名函数的⽅法是不可取的，因为每回调⽤匿名函数，tid的值都是undefined，不能达到节流的⽬的。
οnclick="throttle(function() {resizehandler('a','b');},window)"
如果直接将值与参数分开传递，需要重写throttle的⽅法定义，⽽且这样操作达不到节流函数复⽤的⽬的。我⾃⼰思考的处理⽅式如下（这⾥直接使⽤了arguments,⽬的是达到了，不知道会不会有其他影响）：
<div class="container" id="div1" οnclick="test('a','b')"></div>
<script>
function test() {
throttle(resizehandler,window,arguments)
}
function throttle(method, context,parameters) {
clearTimeout(method.tId);
method.tId = setTimeout(function() {
method.apply(context,parameters);
}, 500);
}
var n = 0;
function resizehandler(name, title) {
console.log(++n);
console.log(name);
console.log(title);
}
第⼆种实现⽅式：
function throttle(method, delay) {
var timer = null;
return function() {
var context = this,
args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
method.apply(context, args);
}, delay);
}
}
因为该⽅法使⽤了函数句柄，可以通过构造匿名函数的⽅式来传递参数，不过也正是由于这⼀原因的影响，导致在事件绑定上有⼀定区别。
resizehandler('a','b');
}, 500);
上⾯代码所⽰的绑定⽅法是可⾏的，但直接onclick = "throttle(function() {resizehandler('a','b');}, 500)"；是不可⾏的，返回的函数没有被调⽤，如果改成onclick = "throttle(function() {resizehandler('a','b');}, 500)()"，函数被调⽤了，但是没达到节流的⽬的。具体原因，我也不是太懂，希望有⼈能够指教。
当然将函数和参数分开传递，也是能够实现的，与前⼀种⽅式没有太⼤区别，⼤家可以根据实际情况来使⽤。
最后，在实现的过程中，⼜发现了⼀个新的名词叫函数去抖，根据定义来说，前⾯我们所提到的内容应该都是函数去抖，不过细致的也没见多⼤区分，⼤家有兴趣的可以去看这篇⽂章：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。