0

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

2 回答 2

4

最快的方法实际上是使用 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);
});
于 2012-12-11T18:39:33.503 回答
0

underscore.js 中有一个节流函数可以处理这种情况。你可以看到他们的注释源代码，或者如果你在你的项目中使用 underscore.js，这里有一些使用文档

于 2012-12-11T18:47:00.993 回答