使用JavaScript/jQuery在2秒后触发事件

Question

我有类似于jquery-run-code-2-seconds-after-last-keypress的需求。

现在，当我使用@brad的代码时，只要我这样做就可以正常工作：

$('input.username').keypress(debounce(function (event) {
    console.log('Search keypress');
}, 250));

但是不包括以下情况：

$('#search').keypress(function () {
    debounce(function (event) {
        console.log('Search keypress');
   }, 2000);
});

这里是Fiddle。非常感谢您的帮助。

编辑：

最初我做的类似于以下内容，这不是我想要的-

$('#search').keypress(function () {
    setTimeout(function () {
      console.log('Search keypress');
    }, 3000);
});

编辑2：- 我想要的和下面非常相似：（从那里复制的文本）

目前，在输入3个字符后，每次按键都会搜索。

我想要的是

情况1：
用户输入tes
经过2秒 进行搜索

---

情况2：
用户输入tes
过了1秒钟
用户按下t
经过2秒
在test上执行搜索

---

情况3：
用户输入tes
过了1秒钟
用户按下t
过了1.5秒钟
用户按下i
过了1.5秒钟
用户按下n
过了1.5秒钟
用户按下g
经过2秒
在testing上执行搜索

因此，如您所见， 只有在按键后2秒内没有按键（或粘贴等）时才执行搜索操作。

我的基本想法是。

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

- Shubh

---

检查我的更新答案 ;) - Tomanow

Answer 1

使用定时器来去抖：

{ 顺便说一句，使用 keyup 事件而不是 keypress，因为删除键不会触发 keypress 事件，详情请见：http://www.quirksmode.org/js/keys.html }

演示

var timer;
$('#search').keyup(function () {
    clearTimeout(timer);
    timer = setTimeout(function (event) {

        console.log('Search keypress');
        var text = $('#search').val();

        $('#textTobeSearched').text(text);
    }, 2000);
});

- A. Wolff

---

我选择了你的解决方案，因为它对于我在 Backbone 项目中的实现来说更加容易。谢谢。 - Shubh

Answer 2

更新: 这里的防抖时间为2秒钟（等待2秒钟）：fiddle

$('#search').keyup( debounce(function() {
       console.log('Search keypress');
        var text = $('#search').val();

        $('#textTobeSearched').text(text); 
    }, 2000));

---

使用 setTimeout

$('#search').keypress(function() {
    setTimeout(function() {
        console.log('search keypress');
    }, 2000);
});

- Tomanow

---

我可能不擅长解释问题，但如果我按5个键2秒钟，它将会触发5次。如果我没错的话。 - Shubh

在每次按键时绑定一个新的keyup处理程序，绝对不是正确的方法。你应该避免将keyup绑定事件嵌套在keypress内部，为什么要这样做呢？ - A. Wolff

Answer 3

debounce 返回一个需要调用的函数。当直接在 keypress() 函数中使用时，返回的函数是您的事件处理程序。然而，在您的第二段代码中，您将函数防抖动了，但从未实际调用它。

debounce(function(event) {console.log("Search keypress");},2000)();

- Niet the Dark Absol