在ES6中，也可以使用箭头函数语法。

在本例中，在调用searchFunc发出查询请求之前，在用户完成输入之后，代码将keyup事件延迟400ms。

const searchbar = document.getElementById('searchBar');
const searchFunc = // any function

// wait ms (milliseconds) after user stops typing to execute func
const delayKeyUp = (() => {
    let timer = null;
    const delay = (func, ms) => {
        timer ? clearTimeout(timer): null
        timer = setTimeout(func, ms)
    }
    return delay
})();

searchbar.addEventListener('keyup', (e) => {
    const query = e.target.value;
    delayKeyUp(() => {searchFunc(query)}, 400);
})

更新后的Typescript版本:

const delayKeyUp = (() => {
  let timer: NodeJS.Timeout;
  return (func: Function, ms: number) => {
    timer ? clearTimeout(timer) : null;
    timer = setTimeout(() => func(), ms);
  };
})();

我使用这个小函数也是出于同样的目的，在用户停止输入一段特定的时间后，或者在以高速率触发的事件中执行一个函数，比如resize:

function delay(callback, ms) { var timer = 0; return function() { var context = this, args = arguments; clearTimeout(timer); timer = setTimeout(function () { callback.apply(context, args); }, ms || 0); }; } // Example usage: $('#input').keyup(delay(function (e) { console.log('Time elapsed!', this.value); }, 500)); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label for="input">Try it: <input id="input" type="text" placeholder="Type something here..."/> </label>

工作原理:

delay函数将返回一个内部处理单个计时器的包装函数，在每次执行时，计时器都会根据所提供的时间延迟重新启动，如果在此时间之前发生多次执行，计时器将重置并重新启动。

当计时器最终结束时，执行回调函数，传递原始上下文和参数(在本例中，是jQuery的事件对象和DOM元素)。

更新2019-05-16

我在现代环境中使用ES5和ES6特性重新实现了该功能:

function delay(fn, ms) {
  let timer = 0
  return function(...args) {
    clearTimeout(timer)
    timer = setTimeout(fn.bind(this, ...args), ms || 0)
  }
}

该实现包含一组测试。

对于更复杂的东西，看看jQuery Typewatch插件。

Use

mytimeout = setTimeout( expression, timeout );

其中expression是要运行的脚本，timeout是在它运行之前等待的时间(以毫秒为单位)——这不会暂停脚本，而是简单地延迟该部分的执行，直到超时完成。

clearTimeout(mytimeout);

将重置/清除超时，这样它就不会在表达式中运行脚本(就像取消)，只要它还没有被执行。

今天看到这个有点晚，但我想把它放在这里，以防有人需要。只需将函数分离以使其可重用。下面的代码在输入stop后将等待1/2秒。

    var timeOutVar
$(selector).on('keyup', function() {

                    clearTimeout(timeOutVar);
                    timeOutVar= setTimeout(function(){ console.log("Hello"); }, 500);
                });

好吧，我也做了一段代码限制高频ajax请求由Keyup / Keydown。看看这个:

https://github.com/raincious/jQueue

像这样提问:

var q = new jQueue(function(type, name, callback) {
    return $.post("/api/account/user_existed/", {Method: type, Value: name}).done(callback);
}, 'Flush', 1500); // Make sure use Flush mode.

并像这样绑定事件:

$('#field-username').keyup(function() {
    q.run('Username', this.val(), function() { /* calling back */ });
});

如果你想在类型完成后搜索，使用一个全局变量来保存setTimout调用返回的超时，如果它还没有发生，就用clearTimeout取消它，这样它就不会触发超时，除非在最后一个keyup事件

var globalTimeout = null;  
$('#id').keyup(function(){
  if(globalTimeout != null) clearTimeout(globalTimeout);  
  globalTimeout =setTimeout(SearchFunc,200);  
}   
function SearchFunc(){  
  globalTimeout = null;  
  //ajax code
}

或者使用匿名函数:

var globalTimeout = null;  
$('#id').keyup(function() {
  if (globalTimeout != null) {
    clearTimeout(globalTimeout);
  }
  globalTimeout = setTimeout(function() {
    globalTimeout = null;  

    //ajax code

  }, 200);  
}