Anında aramada ajax çağrılarının sayısını azaltın

Question

Sitem için anında arama yapmayı bırakmaya çalışıyorum. Her şey yolunda, bu hariç.

var timeOut; 
$('#search input[name=\'search\']').on('keyup', function(e) { 
    // If enter - submit the search field 
    if (e.keyCode == 13) { 
     $('header input[name=\'search\']').parent().find('button').trigger('click'); 
    } 
    // Call only when length is at least 2 and the key pressed is alphanumeric 
    else if ($('#search input[name=\'search\']').val().length>2 && ((e.keyCode>=65 && e.keyCode<=90) || (e.keyCode>=97 && e.keyCode<=122))) { 
     timeOut = null; 
     //alert(timeOut); 

     if (!timeOut) { 
      timeOut = setTimeout(function() { 
       $.ajax({ 
        url: 'ajax.php', 
        type: 'post', 
        async: false, 
        data: 'ACTION=SEARCH&search='+$('#search input[name=\'search\']').val(), 
        dataType: 'json', 
        beforeSend: function() { 
         $('#loader-icon').show(); 
        }, 
        complete: function() { 
         $('#loader-icon').hide(); 
        }, 
        success: function(json) { 
         //$('.product-list-row').html(json); 
         $('#search-listing').html(json['html']); 
        }, 
        error: function(xhr, ajaxOptions, thrownError) { 
         alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 
        } 
       }); 
       timeOut = null; 
      }, 500); 
     } 
    } 
}); 

Sorun 1: My komut ben hiç beklendiği gibi setTimeOut çalışmıyor nedense, sunucuyla çok sayıda çağrı yapmaya biter. Ajax çağrısı, sadece kullanıcı her şeyi yazdığında ya da böyle bir şey yaptığında yapılmalıdır.

Sorun 2: Herhangi bir nedenle hızlı yazdığımda giriş çubuğu düzenlenemiyor. Ajax, ancak son metinsel giriş ile çalışır.

Answer 1

yerine setTimeout ile bu mücadele çalışmakla, AJAX tarafından döndürülen jqXHR nesnesini kullanarak önceki çağrıyı iptal edebilir. Bunu kullanmak daha temiz ve basit. async: false,'u da kaldırın.

var timeOut; 
var xhr; 
$('#search input[name=\'search\']').on('keyup', function(e) { 
    // If enter - submit the search field 
    if (e.keyCode == 13) { 
     $('header input[name=\'search\']').parent().find('button').trigger('click'); 
    } 
    // Call only when length is at least 2 and the key pressed is alphanumeric 
    else if ($('#search input[name=\'search\']').val().length>2 && ((e.keyCode>=65 && e.keyCode<=90) || (e.keyCode>=97 && e.keyCode<=122))) { 
     if(xhr && xhr.readyState != 4){ 
      xhr.abort(); 
     } 
     xhr = $.ajax({ 
      url: 'ajax.php', 
      type: 'post', 
      data: 'ACTION=SEARCH&search='+$('#search input[name=\'search\']').val(), 
      dataType: 'json', 
      beforeSend: function() { 
       $('#loader-icon').show(); 
      }, 
      complete: function() { 
       $('#loader-icon').hide(); 
      }, 
      success: function(json) { 
       //$('.product-list-row').html(json); 
       $('#search-listing').html(json['html']); 
      }, 
      error: function(xhr, ajaxOptions, thrownError) { 
       alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 
      } 
     }); 
    } 
}); 

Answer 2

doğru çözüm her ikisinin birleşimidir, yeni bir yapılır ve ayrıca, yeni isteği ateşlemesini mücadele edilmelidir halinde talebe çalışan iptal. Her keyUp arayışını yangın gerek

// This is your xhr, each request save into this 
// variable, in order to be able to abort it if needed 
var xhr; 

// Wrap your event handler using the debounce function 
$("#search").on("keyup", _.debounce(function(e) { 
    // Abort running request 
    if(xhr) { 
    xhr.abort(); 
    xhr = null; 
    } 

    // Store the new request 
    xhr = $.ajax({ 
    // Search for the term $(this).val() 
    }); 
},500)); 

yoktur, ama sadece: Sen (http://underscorejs.org/#debounce bakınız) ve kod gerektiği şöyle filtreleme denilen bunun için güzel bir işlevi vardır çizgi kütüphanesini kullanabilirler Kullanıcı yazmayı bıraktığında - sizden kurtulma sizin için yapar. Ve istek yapılması durumunda önceki sonuçları işlemeye gerek yoktur.