Javascriptの機能を正しく使いますか？

Question

私のアプリには重大な問題があります。私はEXPを検索したいカテゴリを選択した後に表示さ

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

：

があります：私は、インスタント検索「のようにFacebookの」書いロック、ヘビーメタル、ポップ、インディー...だから、どのカテゴリをクリックするかによって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（）」関数を使用すると、どのカテゴリを選択DIV、それは意志フェードインの検索と入力の結果が表示されますdiv要素をフェードアウトします。 '上記の「入力」となります。

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

問題は、私が長いような何か入力したときにということである：「ザ・ジミ・ヘンドリックス・エクスペリエンスを」私はカテゴリを変更しても、それは、検索を繰り返し、別の検索機能「soletsgoは（）」の検索を行いますアーティストは、「キーアップ」ごとにその結果に達するまで、最後の検索を続けます。私はここで何が起こっているのか知っていますが、何をすべきか分かりません。誰も助けることができますか？

Answer 1

問題は、keyupイベントがトリガーされるたびにsetTimeoutがトリガーされていることです。その結果、ajaxリクエストは1回のキー押下ごとに行われます。

はこのような何か試してみてください：すべての

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

2つのグローバル変数を作成します。最初に - search_in_progress、それがTRUEなら検索しません。検索が終了すると、FALSEに設定され、別の検索が行われます。 2番目の変数 - last_searchは、同じものを2回検索することはできません。