在方法调用中进行延迟[重复]

Question

我有搜索栏（文本字段）组件，它会根据用户类型更新列表。问题是，对于用户输入的每个字符，列表都会更新，因此如果他们想写入Learn React，列表会更改11次！我需要做一些延迟函数（updateList）调用的事情，比如说让它每1秒调用一次，即使它在一秒钟内被调用了很多次。任何建议。

Answer 1

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

https://jsfiddle.net/kmo61q89/

学分归大卫·沃尔什所有(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);

Answer 2

通过简单的方法，您可以做到这一点：

var debounceTimeout = null;

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

你也可以通过很多方式来处理这个问题，比如用bool值设置一个变量，当成功时，让它为假，当搜索触发时，返回为真