Jquery在最后一次按键后2秒运行代码

Question

我正在为网站开发自动搜索功能.

它使用ajax来查询api.

在输入3个字符后,它将在每次按键时搜索.

我想要的是

案例1:
用户输入测试
2秒后执行搜索

---

情况2:
用户输入测试
1秒通过
用户按t
2秒
测试通过搜索

---

案例3:
用户输入测试
1秒通过
用户按下t
1.5秒通过
用户按下i
1.5秒通过
用户按下n
1.5秒通过
用户按g
2秒通过
搜索执行测试

如您所见,搜索操作仅在按键后两秒内没有按键(或粘贴等)时执行.

我的基本想法是.

on keydown调用一个设置超时的函数,该函数还设置一个包含文本框中最后一个条目的变量.当超时到期时,它会检查框中的值以查看它是否与变量中的值匹配.

如果匹配则没有变化.搜索也是如此

如果他们不做任何事情,因为后续按键的超时将跟随进行相同的检查.

这是唯一/最好的方法吗？

Answer 1

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
}));

Answer 2

几乎相同,只是在满足条件时才设置定时器:

<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>