键控函数之间的 Jquery 延迟

Posted 2023-05-07

【中文标题】键控函数之间的 Jquery 延迟

【英文标题】：Jquery Delay Between Keyup Functions

【发布时间】：2011-05-19 21:06:12

【问题描述】：

我正在编写一些代码，试图将我网站中的 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()
);

【参考方案1】：

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

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

这个例子没有做 ajax 部分，但你会明白的。尝试尽可能快地在输入框中输入内容。它将以延迟的速度更新搜索框。它会记住状态为“脏”，然后在必要时刷新。

希望这能让你开始。

鲍勃

【讨论】：

谢谢你，你是黑帮！

我会把它添加到我的简历中。谢谢。

【参考方案2】：

这是一个类似于 google 搜索的示例。直到用户暂停输入后才会搜索。

http://jsfiddle.net/WNX5q/

【参考方案3】：

我会做这样的事情

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

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

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

这里是和平代码，希望能帮助你；）

$(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(););
        
                  );
                 );

【讨论】：

如何将其放入现有代码中？对不起，我没那么聪明...... :)