Question

JQuery对我来说是一个新手，我使用ajax建立了一个搜索建议系统，该系统工作得很好但由于onKeyUp限制而工作得很慢。经过一番阅读后，我发现我可以在事件上设置一个计时器。所以我要做的是在'prod-name-input'输入字段onKeyUp事件上设置一个计时器，以便每2秒调用一次。我在网上找到了一些这样的例子，但是我无法将它们中的任何一个成功地应用到我的代码中，我想知道是否有人可以告诉我这是如何工作的？非常感谢提前。

我的输入字段

<input onKeyUp="search(this.value)" type="text" class="prod-name-input"/>

JS

function search(searchword) {
        $('.smart-suggestions').load('invoice-get-data.php?searchword=' + searchword);  
    }

Answer 1

最快的方法实际上是使用keydown事件。（它作用于按键而不是被释放，而且总是更快。）

var timer;
$(".prod-name-input").keydown(function(){
    var self = this;
    clearTimeout(timer);
    timer = setTimeout(function(){
        $(".smart-suggestions").load('invoice-get-data.php?searchword=' + self.value);
    },250);
});

如果用户停止输入超过1/4秒，则会加载结果。如果发生的请求太多，请将延迟时间增加到500.

我将逐行查看代码：

// declare a variable that will hold a reference to the timer we create
var timer;
// bind a keydown event to all existing elements that have the prod-name-input class
$(".prod-name-input").keydown(function(){
    // store a reference to the clicked element so we can access it inside of setTimeout()
    var self = this;
    // clear existing timer stored in the timer variable (if any)
    clearTimeout(timer);
    // create a new timer and store it in the timer variable
    timer = setTimeout(function(){
        // load content
        $(".smart-suggestions").load('invoice-get-data.php?searchword=' + self.value);
    // give the timer a 250ms delay (0.25 seconds or 1/4 of a second)
    },250);
});

Answer 2

underscore.js中有一个处理此场景的限制功能。您可以在项目中看到他们的annotated source，或者如果您在项目中使用了underscore.js，则可以使用一些使用文档here

带计时器的OnKeyUp事件？

2 个答案: