延迟方法调用[重复]

Posted 2023-02-21

【中文标题】延迟方法调用[重复]

【英文标题】：make a delay in a method call [duplicate]

【发布时间】：2019-03-15 18:13:23

【问题描述】：

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

【问题讨论】：

请添加一些我们可以查看并提供帮助的代码。

大量的代码可以限制或去抖动

是的 debounce 工作，您能否将其添加为答案？谢谢

这个问题之前肯定已经解决了。作为伪伪代码，首先在每个 keyDown 事件上设置一个计时器。如果计时器没有结束，则在每个新的 keyDown 事件上重置计时器。一旦结束，触发更新！简单！

【参考方案1】：

用简单的方式你可以做到这一点：

var debounceTimeout = null;

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

你也可以通过很多方式来处理这个问题，比如设置一个带有布尔值的 var，当成功时让它为 false 并在搜索触发时返回 true ..etc

【参考方案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);