如何在调用 Live Keyup 事件后延迟 Javascript 函数的执行？

Question

各位程序员，我已经从下面的函数中删除了所有内容，只针对我需要帮助的内容...

keyup 事件被调用后，reloadContent 函数将进行 ajax 调用以从数据库中收集新数据。

唯一的问题是，我的服务器正在超载，因为 keyup 事件没有延迟，在每个 keyup 函数被调用之后。

我需要一种方法来延迟，比如 1 秒，然后再调用 reloadContent 函数。这样它就不会运行 4 次（当用户输入 j o h n 时），而是在用户输入 (john) 后仅运行 1 次，假设他们可以输入超过 1 个字符/秒。

$('#searchinput').live('keyup',function() {

        reloadContent(); //execute load function

});

感谢任何建议

Answer 1

您可以在 keyup 处理程序中设置超时，并使用 jQuery 的 data() 工具将其 id 与元素相关联。这样，如果keyup事件在延迟用完之前再次触发，您可以清除现有的超时并安排新的超时：

$("#searchinput").live("keyup", function() {
    var $this = $(this);
    var timerId = $this.data("timerId");
    if (timerId) {
        window.clearTimeout(timerId);
    }
    $this.data("timerId", window.setTimeout(reloadContent, 1000));
});

Answer 2

$('#searchinput').live('keyup',function() {
    window.setTimeout(function(){
        reloadContent(); //execute load function
    },1000);
});

这会造成延迟，但我认为你不仅需要延迟来制作你想要的东西。