我有一个搜索栏。现在它搜索每一个关键点。因此,如果有人键入“Windows”,它将使用AJAX搜索每个键:“W”、“Wi”、“Win”、“Wind”、“Windo”、“Window”、“Windows”
我希望有一个延迟,所以它只在用户停止键入200毫秒时进行搜索
在keyup函数中没有此选项,我尝试了setTimeout,但没有成功
我该怎么做
我使用这个小函数也是为了同样的目的,在用户停止键入指定的时间后或在高速率触发的事件中执行函数,如resize:
函数延迟(回调,毫秒){
var定时器=0;
返回函数(){
var context=this,args=arguments;
清除超时(计时器);
定时器=设置超时(函数(){
apply(上下文,args);
},ms | | 0);
};
}
//用法示例:
$(“#输入”).keyup(延迟)(函数(e){
console.log(’timepassed!’,this.value);
}, 500));
var定时器=0;
返回函数(){
var context=this,args=arguments;
清除超时(计时器);
定时器=设置超时(函数(){
apply(上下文,args);
},ms | | 0);
};
}
//用法示例:
$(“#输入”).keyup(延迟)(函数(e){
console.log(’timepassed!’,this.value);
}, 500));
<;脚本src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js“></脚本>;
<;标签为=“输入”>;试试看:
<;input id=“input”type=“text”placeholder=“在此处键入内容…”/>;
</标签>
工作原理:
delay函数将返回一个包装函数,该函数在内部处理单个计时器,在每次执行中,计时器将以提供的时间延迟重新启动,如果在此时间过去之前发生多次执行,计时器将重新设置并重新启动
当计时器最终结束时,执行回调函数,传递原始上下文和参数(在本例中,jQuery的事件对象和DOM元素为this)
更新2019-05-16
我已在现代环境中使用ES5和ES6功能重新实现了该功能:
功能延迟(fn,ms){
设定时器=0
返回函数(…args){
清除超时(计时器)
timer=setTimeout(fn.bind(this,…args),ms | | 0)
}
}
该实现包含一组测试
要了解更复杂的内容,请查看jQuery Typewatch插件