Question

我有搜索栏（文本字段）组件，它根据用户键入的内容来更新列表。问题在于，用户输入列表中的每个字符都会更新，因此，如果他们要写入Learn React，则列表会更改11次！我需要做一些延迟该函数（updateList）调用的操作，比方说使它每1秒钟调用一次，即使在一秒钟内被多次调用也是如此。任何建议。

Answer 1

您可以通过简单的方式执行此操作：

var debounceTimeout = null;

searchInput.on('change keyup', function(event){
  clearTimeout(debounceTimeout);
  debounceTimeout = setTimeout(searchEvents, 500);
});

您还可以通过很多方法来处理此问题，例如使用bool值设置var，成功时将其设为false，然后在搜索触发..etc

时返回true。

Answer 2

我创建一个JSFiddle来向您展示一个示例：

https://jsfiddle.net/kmo61q89/

信用归David Walsh（https://davidwalsh.name/javascript-debounce-function）

将此反跳功能添加到您的代码中：

function debounce(func, wait, immediate) {
  var timeout;

  return function executedFunction() {
    var context = this;
    var 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);
  };
};

然后，将事件侦听器添加到您的输入中：

var input = document.getElementById("myInput");

var searchFunction = debounce(function() {
  console.log('seach code here')
}, 250);

input.addEventListener('keyup', searchFunction);

延迟方法调用

2 个答案: