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

Question

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

它使用ajax来查询api。

输入 3 个字符后，每次按键都会进行搜索。

我想要的是

Case1:
User enters tes
2 seconds pass search performed

---

Case2:
User enters tes
1 second pass
user presses t
2 seconds pass
search is performed on test

---

Case3:
User enters tes
1 second passes
user presses t
1.5 seconds pass
user presses i
1.5 seconds pass
user presses n
1.5 seconds pass
user presses g
2 seconds pass
search in performed on testing

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

我的基本想法是。

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

如果它们匹配，则没有变化。 所以进行搜索

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

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

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 返回一个包装函数，该函数清除先前调用中的任何现有超时，然后设置 future delay 毫秒的超时以调用 f。对返回函数的参数的引用用于调用f，确保f接收到它所期望的参数。

您应该按如下方式使用它:

$('#search').keyup(throttle(function(){
    // do the search if criteria is met
}));