运行事件侦听器内的匿名函数内的函数

Question

正在研究去抖动功能，发现这段代码似乎可以解决问题：

$(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);
   });

但它停止工作了。为什么？

Answer 1

你不必将它包装在匿名函数中，你可以简单地使用：

.addEventListener('input', debounce(searchUsers, 450))

Answer 2

debounce 是一个函数，当被调用时，returns 另一个函数 ，在您的原始代码中，当事件触发时被调用：

  var myEfficientFn = debounce(searchUsers, 450);
  document.getElementById("search").addEventListener('input', myEfficientFn);

相比之下，在您的第二个代码中，您在 debounce 内部调用事件侦听器。 debounce returns 一个函数，但你永远不会调用它：with

debounce(searchUsers, 450);

你有一个未使用的函数表达式，有点像

const someVar = () => console.log('hi');

以后从未使用过 someVar。

将 debounce 调用（returns 您希望作为事件侦听器的函数）直接传递到 addEventListener：

document.getElementById("search").addEventListener('input', debounce(searchUsers, 450));

Answer 3

其他答案遗漏了一些有助于您了解正在发生的事情的信息：

getElementById("search").addEventListener('input', function() { // <--- this function gets called on click
  debounce(searchUsers, 450); // this is a function, not a function call
});


getElementById("search").addEventListener('input', function(ev) { // <--- this function gets called on click
  debounce(searchUsers, 450)(ev); // this is how you call the function returned by debounce
});

Answer 4

简短说明；

debounce 函数 returns 事件侦听器运行的函数。

return function()
...

您的第一种方法将返回的函数保存到一个变量中，偶数侦听器运行保存它。

addEventListener('input', myEfficientFn);
...

您的第二种方法在另一个函数中获取返回的函数，但没有人真正运行使用它。

debounce(searchUsers, 450);    //WHo runs the returned function?
...

在您自己的上下文中的解决方案 - 运行返回的函数！

getElementById("search").addEventListener('input', function(e) {
     debounce(searchUsers, 450)(e);
   });

运行事件侦听器内的匿名函数内的函数

Run a function inside an anonymous function inside event listener

javascript

anonymous-function

addeventlistener

运行 事件侦听器内的匿名函数内的函数

Run a function inside an anonymous function inside event listener

javascript

anonymous-function

addeventlistener

运行事件侦听器内的匿名函数内的函数