如何計時Javascript功能正確？

Question

我在我的應用程序中遇到了嚴重的問題。我寫了「Facebook的類似」即時搜索：

有一個：

<input id="theinput" type="text" title="New Search"/> 

後，我選擇我要查找，EXP哪一類出現：搖滾，重金屬，流行，獨立.. 。因此，根據哪個類別，我單擊javascript將它的名稱設置爲搜索頁面的變量以知道要在哪個表中搜索（每個表是一個類別）。所以的JavaScript的部分是：

$('#rockselector').click(function(){ 
     fadethings(); 
     $("#resultdiv").html('<span style="color: #fff; font: 12px Verdana, serif; position: relative; left: 20px; top: 20px;">Search a Rock Artist</span>'); 
     whichselector = "rock"; 
     soletsgo(); 
    }); 

    //----------------------------------------------- 

    $('#heavymetalselector').click(function(){ 
     fadethings(); 
     $("#resultdiv").html('<span style="color: #fff; font: 12px Verdana, serif; position: relative; left: 20px; top: 20px;">Search a Heavy Metal Artist</span>'); 
     whichselector = "heavymetal"; 
     soletsgo(); 
    }); 

的'fadethings（）函數將淡出，你選擇哪一類的股利，它會淡入股利，這將顯示搜索和輸入的結果：「輸入'，如上所示。函數「soletsgo（）」會做搜索：

 function soletsgo(){ 

$('#theinput').keyup(function(){ 

    function searchy(){ 
    value = escape($('#theinput').val()); 

    if (value.length > 0){ 
    $("#autodatathing").load("../searchmaster.php?word="+value+"&cat="+whichselector+""); } 

    } // End of searchy() function 

      setTimeout(searchy,1000); 

    }); // End of keyup function 

} // End Of Function soletsgo() 

的問題是，當我輸入一些東西長這樣的：「吉米·亨德里克斯經驗」，它重複搜索，甚至當我改變類別和搜索另一藝術家繼續進行最後的搜索，直到它達到每個'鍵入'的結果。我知道這裏發生了什麼，但是，不知道該怎麼做。誰能幫忙？

Answer 1

問題在於，每次觸發按鍵事件時都會觸發setTimeout。這導致每個按鍵都會產生一個ajax請求。

嘗試這樣：

所有的

function soletsgo() { 
    var timer, jqXHR, input; 

    function searchy() { 
     var value = escape(input.val()); 

     if (value.length > 0) { 
      // Abort the last ajax request becuase we don't care anymore 
      if (jqXHR) jqXHR.abort(); 
      jqXHR = $.ajax({ 
       url: "../searchmaster.php", 
       data: { 
        "word": value, 
        "cat": whichselector 
       }, 
       success: function(data) { 
        $("#autodatathing").html(data); 
       } 
      }); 
     } 

    } 

    input = $('#theinput').keyup(function() { 
     // Clear the timer because they are typing more 
     clearTimeout(timer); 
     timer = setTimeout(searchy, 1000); 
    }); 
} 

Answer 2

首先，不要定義你的keyup事件的回調內部searchy功能。這不是你應該定義函數的地方。當用戶按下搜索字段中的一個鍵觸發搜索功能時，我總是會重置超時時間，因此它只會在用戶停止輸入時才進行搜索。

var searchTimeout = false; 

function searchy() { 
    var value = escape($('#theinput').val()); 

    if (value.length > 0){ 
     $("#autodatathing").load("../searchmaster.php?word="+value+"&cat="+whichselector+"");  
    } 
} 

$('#theinput').keyup(function(){ 
    window.clearTimeout(searchTimeout); 
    searchTimeout = setTimeout(searchy, 1000); 
} 

Answer 3

做出兩個全局變量。首先 - search_in_progress，如果它是TRUE - 你不搜索。在搜索結束後，您將其設置爲FALSE以進行其他搜索拍攝。第二個變量 - last_search不會讓你搜索同樣的東西兩次。