JavaScript 防抖函数,绑定事件后事件对象传参问题

[WNW]

明明事件对象 e 是作为的 debounce 中的第一个 fn 函数参数,为什么能够被 debounce 函数返回的匿名函数中 的...args 获取得到呢?实在想不通,不知道有哪位同学可以答疑解惑,不胜感激

// 防抖
function debounce(func, wait = 500) {

  let timeID;

  return function (...args) {

    if (timeID) clearTimeout(timeID);
    timeID = setTimeout(() => {
      func.apply(this, args);
    }, wait);
    
  }

}

let password = document.querySelector('[name="password"]');


// 明明事件对象 e 是作为的 debounce 中的第一个 fn 函数参数,为什么能够被 debounce 函数返回的匿名函数中
// 的...args 获取得到呢?实在想不通,不知道有哪位同学可以答疑解惑,不胜感激

password.addEventListener("keyup", debounce(function (e) { 
	console.log(222) 
}, 500));

[zjffun]

debounce 返回的是一个函数，可以先分析这个更简单的流程看看

```js
function debounce(func) {
return function (...args) {
console.log("args", args);
func(...args);
};
}

let password = document.querySelector('[name="password"]');

const debouncedFn = debounce(function (e) {
console.log(222);
});

console.log("debouncedFn", debouncedFn);

password.addEventListener("keyup", debouncedFn);
```

[zjffun]

上面的代码 https://gist.github.com/zjffun/e3d711f12d599d674f63d576c7a45a29

[WNW]

@zjffun 好的谢谢,我先试试

[Justin13]

因为你绑定的就是 debounce 的返回值

[dasbn]

因为你使用的就是 debounce 函数返回的匿名函数 ， 原函数已经被包起来了，func.apply(this, args); 这一句就是调用原来的函数。并不是匿名函数获取对象 e ，而是匿名函数把 e 传递给原来的函数作为参数。

[walking50w]

```
function debounce(func, wait = 500) {

let timeID;

return function fn(...args) {

if (timeID) clearTimeout(timeID);
timeID = setTimeout(() => {
func.apply(this, args);
}, wait);

}

}

```

[walking50w]

@silasamiseaf94
// 重新命名, 简化
debounce(outer, wait = 500) {
function inner(e) {
outer.apply(null, e)
}
return inner
}
// callback 执行顺序
// 延时后
onKeyup => inner(e) => outer(e)
// 所以 outer 中 e 来自 inner

[WNW]

@dasbn 问题是匿名函数得先获取才能传递啊,我疑惑的就是匿名函数是怎么获取得到 e 的,获取到了才能再传递

[WNW]

@silasamiseaf94 了解明白了

[WNW]

@silasamiseaf94 我知道 outer 的 e 来自 inner,问题只 inner 的 e 是从哪儿来的?

[walking50w]

@WNW 我的天，debounce 返回的 inner 作为 onKeyup 的回调， 回调触发事件，调用 inner 注入 e 参数

[demonzoo]

说实话没太看懂你的问题点在哪里，单说 args 的话不就是个闭包？

[WNW]

@silasamiseaf94 可是 e 明明传给的是 debounce 的第一个 outer 作为 outer 的参数 outer(e),在还没有返回闭包也就是 inner 的时候 e 是随着 outer 先进入 debounce 函数第一层,我的疑惑就是 outer(e)带着 e 进来,这个 e 是怎么被 inner(...args)获取得到的,我知道 inner 里面又从新把 e 通过 apply 再次传递给 outer 了

[WNW]

@silasamiseaf94
password.addEventListener("keyup", debounce(function (e) {
console.log(222)
}));
这里调用的 debounce 的 function(e){} 就是你的 outer,如果按你的理解其实 e 传给的实际上是 inner(...agrs),这个 e 第一步 debounce 执行的时候是直接传给了返回的闭包也就是 inner(...agrs)被...agrs 获取了再传给 outer 了

[walking50w]

@WNW addEventListener 的时候，先执行了 debounce() ，实际绑定的是 debounce 执行后返回的函数 inner 。

addEventListener('keyup', debounce(fn, 500) )
== let inner = debounce(fn, 500); addEventListener('keyup', inner )
// 整个流程的顺序是 先执行 debounce()函数，debounce 返回了新的函数 inner ， 新的函数作为 keyup 事件的回调函数。
事件出发后 inner 执行，inner 中再去调用 outer

[DICK23]

就是一个占位参数，绑定返回后的函数的参数

[WNW]

@silasamiseaf94 明白了,感谢感谢