我将这个小功能用于相同的目的,即在用户停止输入指定的时间后或在触发率很高的事件中执行一个功能,例如
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元素为
this)。
更新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) }}


