Poczekaj 1 sekundę przed wykonaniem żądania AJAX onkeyup

Question

Mam żądanie ajax, które wykonuje za każdym razem, gdy użytkownik naciśnie przycisk (pisze tekst) w pewnym obszarze tekstowym. To by się dobrze sprawdziło (jest to funkcja filtrowania wyników wyszukiwania.), Ale nie byłoby dobrym pomysłem wykonanie filtru po każdym naciśnięciu klawisza. Więc myślałem o zrobieniu czegoś z opóźnieniem. Żądanie ajaxa wykonano by tylko wtedy, gdy minął co najmniej 1 sekundę od momentu naciśnięcia ostatniego przycisku. Jak mogę to osiągnąć?

<textarea id="text" name="text" onkeyup="Search()"</textarea> 

function Search() 
{ 
    $.ajax({... 
    ... 
} 

Tak więc oczywiście będzie działać cały czas. Na przykład, jeśli piszę "cześć" w textarea szybko, to będzie działać 5 razy i nie ma sensu. Wystarczy uruchomić go tylko wtedy, gdy przestanę pisać na więcej niż 1 sekundę.

Answer 1

Można użyć setTimeout, aby opóźnić akcję o określoną liczbę milisekund. Możesz także skasować limit czasu, aby zapobiec kolejkowaniu żądań, jeśli ktoś szybko napisze. Spróbuj tego:

var timer; 
function Search() { 
    clearTimeout(timer) // clear the request from the previous event 
    timer = setTimeout(function() { 
     $.ajax({ 
      // ... 
     }); 
    }, 200); 
} 

Uwaga zrobiłem 200ms opóźnienie, które jest zwykle więcej niż wystarczająco dużo czasu, aby ktoś wpisaniu kilku klawiszy, ale na tyle szybko, że nie wydaje się zbyt powolne dla UI zaktualizować.