2回答

hy_wang

提问者

2020-09-28

export function debounce(deley, callback) {
let task;
return function () {
clearTimeout(task)
console.log(this, 'this')
task = setTimeout(() => {
console.log(this, 'this2')
callback.apply(this, arguments)
}, deley)
}
}

首先，调用方式是

window.addEventListener("resize", debounce(100, initSize, "a", "b"));

这里两次打印this都是window对象，所以我不是很明白apply是怎么改变，

以及arguments的作用是什么，它在内层的return函数中，而return 的function中arguments不存在任意意义啊，它怎么记录传递的参数？请老师解惑

0

1

扬_灵

同学你好，这里的this应该在回调函数执行的时候打印，不是在debounce中打印，debounce是典型个的节流函数。

2020-09-29

共1条回复

扬_灵

2020-09-28

同学你好，这是使用apply的用意是用来绑定this的，arguments是用来记录函数传递的参数的。在debounce中使用callbakc(this,arguments)后在onResize函数打印发现this的指向是window,使用callback.apply(this,arguments)后在onResize函数打印发现this的指向是事件对象,setTimeout()函数中作用域是全局的，也就是setTimeout中的this指的是window。用apply绑定this指向resize的this，这也是为什么不直接调用传递的callback的原因。就是为了让callbakc函数内的this与原本的事件回调函数绑定的this保持一致。

0

2

诺丁山丶

我试验了下，发现不使用apply，结果也是一样的，不影响最终的操作。 export default function debounce(delay, callback) { let task return function() { clearTimeout(task) task = setTimeout(() => { callback() }, delay) } }

2021-04-20

共2条回复