<button id="debounce">点我防抖!</button>
window.onload = function() {
// 1、获取这个按钮,并绑定事件
var myDebounce = document.getElementById("debounce");
myDebounce.addEventListener("click", debounce(sayDebounce(2)));
}
// 2、防抖功能函数,接受传参
function debounce(fn) {
// 4、创建一个标记用来存放定时器的返回值
let timeout = null;
return function() {
// 5、每次当用户点击/输入的时候,把前一个定时器清除
clearTimeout(timeout);
// 6、然后创建一个新的 setTimeout,
// 这样就能保证点击按钮后的 interval 间隔内
// 如果用户还点击了的话,就不会执行 fn 函数
timeout = setTimeout(() => {
// fn.call(this, arguments);
fn.apply(this,arguments)
// fn.apply()
console.log('arguments',arguments)
}, 500);
};
}
// 3、需要进行防抖的事件处理
function sayDebounce(delay) {
// ... 有些需要防抖的工作,在这里执行
console.log("防抖成功!");
}
请问这里的arguments有什么用?fn.apply(this,arguments)改成fn.apply()代码也是正常执行。
这里的arguments是不是要给sayDebounce传参使用?能否给sayDebounce传个参数然后在debounce防抖函数体内获取使用呢?
感谢帮助
###1.arguments
的作用是把参数透传给被debounce
的函数,删掉也能用是你这里sayDebounce
不需要参数。
2.传参是经过debounce
透传的,所以你自然能在函数内获取到传参
我理解是在点击事件里arguments相对于是传递鼠标点击事件的参数(mouserEvent)到函数里,类似于
sayDebounce的函数里就可以使用到mouserEvent
debounce(sayDebounce(2)) 这样传sayDebounce 函数没有return, sayDebounce(2)的结果是undefined,相当于debounce(undefined)
###在你的示例代码里边确实没有什么作用,因为你的 sayDebounce
函数接受的参数没有被使用,
但是如果你的 sayDebounce
函数接收参数又被执行的话,那你不使用 arguments
传递,sayDebounce
就无法接受到执行参数了,
你可以试试去掉 arguments
然后在sayDebounce
中打印一下delay
,会发生什么。
具体Arguments是什么,我之前有些过一篇 什么是 Arguments 隐式参数? ,你可以看看。