我有一个搜索字段。现在它搜索每个键。因此,如果有人键入“淲 indows”,它将使用 AJAX 搜索每个键:“淲”、“i”、“淲in”、“淲ind”、“淲indo”、 “淲窗”,“淲窗”。
我想有一个延迟,所以它只在用户停止输入 200 毫秒时搜索。
函数中没有这个选项keyup,我也试过setTimeout了,但是没用。
keyup
setTimeout
我怎样才能做到这一点?
我将这个小函数用于相同的目的,在用户停止输入指定的时间或在高速触发的事件中执行一个函数,例如resize:
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函数将返回一个内部处理单个计时器的包装函数,在每次执行中,计时器都会以提供的时间延迟重新启动,如果在此时间过去之前发生多次执行,则计时器将重置并重新启动。
delay
当计时器最终结束时,回调函数被执行,传递原始上下文和参数(在这个例子中,jQuery 的事件对象和 DOM 元素为this)。
this
我已经使用 ES5 和 ES6 功能为现代环境重新实现了该功能:
function delay(fn, ms) { let timer = 0 return function(...args) { clearTimeout(timer) timer = setTimeout(fn.bind(this, ...args), ms || 0) } }
该实现包含一组测试。
对于更复杂的东西,看看 jQuery Typewatch插件。