Question

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

我担心的是，我将为我的剧本制作太多不必要的点击。有人可以看看这个并告诉我如何在键盘作为计时器之间延迟1秒？所以它只会每隔一秒更新一次结果吗？

这是我到目前为止创造的，但我不知道它是否正确???

<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/

密钥函数之间的Jquery延迟

3 个答案: