jquery鍵盤功能之間的延遲

Question

我有一些代碼，我正在寫，試圖在我的網站與即時搜索結果融合bing搜索API。我使用jquery的keyup函數將數據發送到我的服務器端腳本，然後獲取bing search xml並顯示結果。

我擔心的是，我會讓我的腳本太多無情的命中。 有人可以看看這個，並告訴我如何我可以把鍵盤之間1秒的延遲作爲一個計時器？所以它只會每隔一秒左右更新一次reults

這是我迄今爲止創造的，但我不知道它的正確嗎？

<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

這個例子沒有做阿賈克斯片，但你會得到的想法。嘗試儘可能快地在輸入框中輸入內容。它會以更新的速度更新搜索框。它記得國家是'骯髒'，然後在必要時刷新。

希望這能讓你開始。

鮑勃

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/