刚开始使用反跳功能，发现这段似乎可以解决问题的代码：
$(document).ready(function() {
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
function searchUsers () {
// some code irrelevant to this question (...)
};
var myEfficientFn = debounce(searchUsers, 450);
document.getElementById("search").addEventListener('input', myEfficientFn);
});
以上似乎很好用。
但是我很好奇我是否可以debounce直接将函数传递给addEventListener而不是首先将函数保存在变量中myEfficentFn。
所以我var myEfficientFn = debounce(searchUsers, 450);从代码中删除了一行，并将最后一行更改为：
getElementById("search").addEventListener('input', function() {
debounce(searchUsers, 450);
});
但它停止工作了。为什么？
debounce是一个函数，当调用该函数时，它会返回另一个函数，在事件触发时将调用您原始代码中的另一个函数：
var myEfficientFn = debounce(searchUsers, 450);
document.getElementById("search").addEventListener('input', myEfficientFn);
相反，在第二个代码中，您是debounce 在事件侦听器内部调用的。debounce返回一个函数，但是您永远不会调用它：with
debounce(searchUsers, 450);
您有一个未使用的函数表达式，有点像
const someVar = () => console.log('hi');
someVar以后再也不用了。
而是debounce直接将调用（返回所需的函数作为事件侦听器）传递给addEventListener：
document.getElementById("search").addEventListener('input', debounce(searchUsers, 450));
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句