如何在触发Live Keyup事件后延迟执行Javascript函数？

Question

程序员们好，我已经从下面的函数中移除了所有内容，只留下需要帮助的部分...

在触发keyup事件后，reloadContent函数将发起一个ajax调用以从数据库中收集新数据。

唯一的问题是，我的服务器负载过重，因为keyup事件没有延迟，每次键入后都会调用函数。

我需要一种方法，在调用reloadContent函数之前延迟1秒钟。这样它就不会运行4次（当用户输入j o h n时），而只会在用户输入后运行1次（john），假设他们可以每秒钟输入多于1个字符。

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

        reloadContent(); //execute load function

});

非常感谢你的建议

- TaylorMac

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

- Frédéric Hamidi

---

明白了，这很有道理，我甚至没有考虑过。等系统允许时我会接受的。谢谢，我会经常使用这个。 - TaylorMac

运作得十分顺利。我相信这将对我的服务器有所帮助，明天在高峰时段进行测试。 - TaylorMac

@Tom，依我之见，data()是jQuery最好的资源之一，因为它们在大多数情况下消除了全局变量的需求。 - Frédéric Hamidi

当然。我一开始使用全局变量来编写回复，但是看到了你的答案后恍然大悟 :) - Tom Shaw

Answer 2

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

这会造成延迟，但我认为你不仅需要延迟才能实现你想要的。

- Larry Foobar

---

的确，这会延迟 AJAX 调用，但仍然会以突发方式运行它们。 - Frédéric Hamidi

@Frédéric Hamidi，你的示例解决了这个问题 =) - Larry Foobar