Keyup函数之间的Jquery延迟

Question

我有一些代码，我正在写，试图整合我的网站与即时搜索结果的bing搜索API。我使用jquery的keyup函数将数据发送到服务器端脚本，然后该脚本获取bing搜索xml并显示结果。

我担心的是，我的脚本会有太多不必要的点击量。有没有人能看看这个，告诉我如何在按键之间设置1秒的延迟作为计时器？所以它只会每隔一秒左右更新一次reults？

THis是我到目前为止创建的，但我不知道它是否正确？

<script type="text/javascript">
var delay = (function() {

    var timer = 0;

    return function(callback, ms) {

        clearTimeout(timer);

        timer = setTimeout(callback, ms);

    };

})();



function reloadsearch() {
    var searchterms = $('#q').val();
    if (searchterms.length >= 3) {
        delay(function() {
            var data = 'source=ajax&q=' + searchterms;
            $.ajax({
                type: "GET",
                url: "results/",
                data: data,
                success: function(html) {
                    if (html !== '') {
                        $("#search-results").html(html);
                        $("#search-results").fadeIn(500);
                    }
                }
            });
        }, 250);
    }

    else

    {
        $("#search-results").fadeOut(250);
    }
};



$('#q').keyup(function() {
    reloadsearch()
});

$(document).ready(function() {
    reloadsearch()
});

​

Answer 1

这是一个输入框接受输入并以比键入更慢的速度进行搜索的示例。

http://jsbin.com/ebela4/8/edit

本例并没有完成ajax部分，但是您将会领会其中的含义。尝试以最快的速度在输入框中键入。它将以延迟的速度更新搜索框。它会记住状态是“脏的”，然后在必要时刷新。

希望这篇文章能帮你入门。

鲍勃

Answer 2

我会做这样的事情

    var delay = false;
$('#q').keyup(function() {

if(!delay){
    delay = true;
    reloadsearch().delay(1000);
    delay = false;
});

从逻辑上讲，它应该可以工作，但我还没有试过！syntex可能需要一些更改。

这里是和平代码，希望能帮助你做到这一点。)

$(document).ready(function(){

function reloadsearch() {
    var searchterms = $('#q').val();
    if (searchterms.length >= 3) {

            var data = 'source=ajax&q=' + searchterms;
            $.ajax({
                type: "GET",
                url: "results/",
                data: data,
                success: function(html) {
                    if (html !== '') {
                        $("#search-results").html(html);
                        $("#search-results").fadeIn(500);
                    }
                }
            });
       }

    else

    {
        $("#search-results").fadeOut(250);
    }
};

var delayOn = false;
$("#test").click(function(){
if(!delayOn){
delayOn = true;
reloadsearch().delay(2000).queue(function(){delayOn = false;$(this).dequeue();});
        }
                  });
                 });

Answer 3

这里有一个类似于谷歌搜索的例子。只有在用户暂停键入之后，它才会搜索。

http://jsfiddle.net/WNX5q/