Jquery在最后一次按键后2秒运行代码
Jquery在最后一次按键后2秒运行代码
提问于 2010-12-06 17:07:10
我正在为一个网站的自动搜索功能工作。
它使用ajax来查询api。
在输入3个字符后，它将在每次按键时进行搜索。
我想要的是
Case1:
用户输入tes
2秒通过搜索执行的
Case2:
用户输入tes
1秒传递
用户按下t
2秒过去了
在测试时执行搜索
Case3:
用户输入tes
1秒通行证
用户按下t
1.5秒过去了
用户按i
1.5秒过去了
用户按n
1.5秒过去了
用户按g
2秒过去了
在测试时执行的搜索
因此，正如您所看到的，只有在按键后的两秒钟内没有按键(或粘贴等)时，才会执行搜索操作。
我的基本想法是。
在按键时调用一个设置超时的函数，该函数还设置一个包含文本框中最后一项的变量。当超时到期时，它检查框中的值，看看它是否与变量中的值匹配。
如果它们匹配，则没有任何变化。搜索也是如此
如果它们没有，那么什么也不做，因为随后的按键超时将跟随执行相同的检查。
这是唯一/最好的方法吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2010-12-06 21:51:15
Remy Sharp中的以下函数将完成此任务：
function throttle(f, delay){
var timer = null;
return function(){
var context = this, args = arguments;
clearTimeout(timer);
timer = window.setTimeout(function(){
f.apply(context, args);
},
delay || 500);
};
}在前面的代码中，f是您想要限制的函数，delay是在最后一次调用后等待的毫秒数(如果省略，则默认为500 )。throttle返回一个包装器函数，该函数清除先前调用的任何现有超时，然后设置未来delay毫秒的超时以调用f。对返回函数的arguments的引用用于调用f，确保f接收到它所期望的参数。
您应该按如下方式使用它：
$('#search').keyup(throttle(function(){
// do the search if criteria is met
}));Stack Overflow用户
发布于 2010-12-06 21:39:15
几乎相同，只是计时器仅在满足条件时设置：
<input id="search" type="text" />
<script>
var timer, value;
$('#search').bind('keyup', function() {
clearTimeout(timer);
var str = $(this).val();
if (str.length > 2 && value != str) {
timer = setTimeout(function() {
value = str;
console.log('Perform search for: ', value);
}, 2000);
}
});
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/4364729
复制相关文章
相似问题