Jak uniknąć narzutu ciągłego żądania ajax na zdarzenie keyup?

Question

np. W formularzu wyszukiwania, gdy użytkownik wprowadzi jakiś tekst, w tym czasie żądanie AJAX powinno wysyłać na każde zdarzenie kluczowania, a klucz wyszukiwania jako ciąg zapytania. Klucz wyszukiwania będzie wartością z pola wprowadzania.

Jeśli użytkownik wpisze „ABCD”, w tym przypadku 3 pierwsze żądanie AJAX powinno się zabić/anulować, bo w 4. żądanie AJAX poszukiwanyklucz będzie „ABCD”

$(document).ready(function(){ 
    $("#searchInput").keyup(function(){ 
     ajaxSearch($("#searchInput").val()); 
    }); 
}); 

Na keyup razie wzywam po " Funkcja ajaxSearch() ".

function ajaxSearch(searchKey) { 
    $.ajax({ 
     type: "get", 
     url: "http://example.com/ajaxRequestHandler/", 
     data: "action=search&searchkey=" + searchKey 
    }).done(function() { 
     /* process response */ 
    }); 
} 

Answer 1

var request; 
function ajaxSearch(searchKey) { 
    /* if request is in-process, kill it */ 
    if(request) { 
     request.abort(); 
    }; 

    request = $.ajax({ 
     type: "get", 
     url: "http://example.com/ajaxRequestHandler/", 
     data: "action=search&searchkey=" + searchKey 
    }).done(function() { 
     /* process response */ 

     /* response received, reset variable */ 
     request = null; 
    }); 
} 

Answer 2

z odpowiedzią Atul Bhosale nadal istnieją cztery żądanie, gdy użytkownik jest wpisanie "ABCD". Jest to tylko kwestia wpisania szybkości i czasu odpowiedzi serwera.

Byłoby lepiej użyć limitu czasu. W tym przypadku wniosek jest tylko wysłać, czy użytkownik „ukończone/bierze timeout” wpisując:

$("#searchInput").keyup(function(){ 
    var value = $(this).val(); 
    setTimeout(function() { ajaxSearch(value) }, 300); 
}); 

Wystarczy bawić z timeout. Dla mnie 300ms jest w porządku ...