殺す進行中のすべてのXHRは

Question

が進行中のすべてのXHRは

$（ '＃検索ボックス'）。からkeyup（関数（）{検索データをバインドする// VARを要求殺す要求します入力= $（ '-入力を検索します。'）のval（）;。

$.getJSON({ // get JSON data 
     url: 'example/query.php?keyword=' + input, 
     //pre-load 
     beforeSend: function() { 
      $(".search-lists").html("<span class='loading'><img src='_/images/loading.gif' /></span>"); 
     }, 
     success: function(data) { 
      if (input.length >= 3) { // limit keyword to >=3 
       var output = "<ul class='search-lists'>"; //output search data list 
       $.each(data, function(key, val) { 
        output += '<li>'; 
        output += '<a>' + val.term + '</a>'; 
        output += '</li>'; 

       }); 
       output += '</ul>'; 
       $('.search-results').html(output); 
       console.log('load ajax'); 
      } // end if 

      else { 
       console.log('kill ajax'); 
      } 
     } 


    }); // JSON request 

}); // data bind 

Answer 1

あなたはフィルタリングを行うだけよりも、最初のチェックを行う必要がある。また、私はを使用してお勧めします。サーバー呼び出しを削減する：へ

<section id="search-box"> 
    <form class="search-field"> 
     <input id="search" class="search-input" type="text" value="Hello, I'm looking for..." /> 
    </form> 
    <div class="search-results"></div> 
</section> 


var timer; 

$('#search-box').keyup(function() { // bind the search data 
    clearTimeout(timer); 

    var input = $('.search-input').val(); 

    if (input.length < 3) { 
     return; 
    } 

    timer = setTimeout(function() { 
     $.getJSON({ // get JSON data 
      url: 'http://test.sonsuzdongu.com/query.php?keyword=' + input, 
      //pre-load 
      beforeSend: function() { 
       $(".search-lists").html("<span class='loading'><img src='_/images/loading.gif' /></span>"); 
      }, 
      success: function(data) { 
       var output = "<ul class='search-lists'>"; //output search data list 

       $.each(data, function(key, val) { 
        output += '<li><a>' + val.term + '</a></li>'; 
       }); 

       output += '</ul>'; 
       $('.search-results').html(output); 
       console.log('load ajax'); 
      } 
     }); // JSON request 
    }, 300); //setTimeout 
}); // data bind 

---

は、すべての要求を殺す - あなたは（要求がより終了します）ページをリロードしてみてください。または、単に出力を処理する必要があるかどうかを示すフラグを追加します。

success: function (data) { 
    if (!data.isEmptyObject()) { 
     // do processing. 
    } 
} 

Answer 2

xhr要求を取り消す方法があります。abortがあります。あなたはあなたの要求に従ってそれを使うことができます。

Answer 3

ちょうどこのような要求を保存し、いつでも好きなときに、あなたは要求を中止することができます。

var request = null; 

.... 
.... 

function fetchJSON(){ 
    if(request != null) { 
     request.abort(); 
    } 
    request = $.getJSON({ // get JSON data 
      url: 'example/query.php?keyword=' + input, 
      //pre-load 
      beforeSend: function() { 
       $(".search-lists").html("<span class='loading'><img src='_/images/loading.gif' /></span>"); 
      }, 
      success: function(data) { 
       request = null; 
       if (input.length >= 3) { // limit keyword to >=3 
        var output = "<ul class='search-lists'>"; //output search data list 
        $.each(data, function(key, val) { 
         output += '<li>'; 
         output += '<a>' + val.term + '</a>'; 
         output += '</li>'; 

        }); 
        output += '</ul>'; 
        $('.search-results').html(output); 
        console.log('load ajax'); 
       } // end if 

       else { 
        console.log('kill ajax'); 
       } 
      } 


     }); // JSON request 

    }); // data bind 
}