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秒过去
在测试中执行搜索

如你所见， 仅当按键后两秒内没有按键（或粘贴等）时，才会执行搜索操作。

我的基本想法是。

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

如果它们匹配，则没有任何变化。 因此，进行搜索，

如果他们不这样做，则什么都不做，因为随后的按键超时将遵循相同的检查。

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

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

： code，f 是您想要限制的函数，delay 是最后一次调用后等待的毫秒数（如果省略，则默认为 500）。 throttle 返回一个包装函数，该函数清除先前调用中的任何现有超时，然后设置未来 delay 毫秒的超时以调用 f。对返回函数的参数的引用用于调用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>