javascript - 在事件监听器内的匿名函数内运行函数

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

debounce 是一个函数，在调用时返回另一个函数，在您的原始代码中，该函数在事件触发时被调用:

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

相比之下，在您的第二个代码中，您正在调用 debounce inside 事件监听器。 debounce 返回一个函数，但您永远不会调用它:with

debounce(searchUsers, 450);

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

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

之后不再使用 someVar。

将 debounce 调用(返回您想要作为事件监听器的函数)直接传递到 addEventListener 中:

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