smart | Webentwicklung
Alles rund um HTML5, PHP, WordPress & Co.

jQuery: AJAX-Requests erst nach einiger Zeit (Delay) senden

14. Februar 2013
Stephan
JavaScript - jQuery: AJAX-Requests erst nach einiger Zeit (Delay) senden

Falls ihr schon mal selbst mit jQuery eine Live-Suche programmiert habt, standet ihr vielleicht vor dem gleichen Problem wie ich. Nach jeder Eingabe in ein bestimmtes Suchfeld, sollte per AJAX eine HTTP-Anfrage an den Server geschickt werden, der basierend auf der Eingabe die entsprechenden Daten zurückliefert.

Mein Problem dabei war, dass ich bei jedem keyup-Event, also unmittelbar nach jedem Zeichen das ins Suchfeld eingegeben wurde, einen AJAX-Request gesendet habe. Hierdurch entstehen zwei wesentliche Nachteile. Zum einem werden unnötig viele HTTP-Anfragen bzw. AJAX-Requests gesendet. Zum anderen kann es passieren, dass die jeweiligen HTTP-Antworten vom Webbrowser nicht in der erwarteten Reihenfolge empfangen werden.

Eine Lösung für dieses Problem ist, dass bevor man den AJAX-Request abschickt eine gewisse Zeit – im Fachjargon spricht man hier gerne von „Delay“ – wartet. Sollte vor Ablauf des Delays das keyup-Event erneut ausgelöst werden, so verwirft man den (alten) auszulösenden AJAX-Request einfach.

Delay mittels der setTimeout

Nach der grauen Theorie nun das ganzes mal in Code wiedergegeben:

var searchTimeout;

$(document).ready(function()
{
    $('#searchInput').bind('keyup', function()
    {
        if(searchTimeout)
        {
            clearTimeout(searchTimeout);
        }

        searchTimeout = setTimeout(function()
        {
            // in dieser Funktion würde dann euer AJAX-Request gesendet werden
            sendAjaxRequest();
        }, 1000);
    });
});

Was wir hier machen ist relativ leicht zu verstehen. Jedesmal wann das keyup-Event für unser Suchfeld ausgelöst wird, prüfen wir ob searchTimeout gesetzt ist. Wenn dem so ist, dann brechen wir das Timeout bzw. den Timer einfach ab. Anschließend erzeugen wir ein neues Timeout bei dem unsere sendAjaxRequest-Funktion nach einem Delay von 1000ms aufgerufen wird.

Unser Suchfeld löst nun also nicht unmittelbar nach jeder Zeicheneingabe einen AJAX-Request aus, sondern erst, nachdem der Benutzer in einem Zeitraum von 1000ms nichts mehr eingegeben hat.

Für solche eine Funktionalität gibt es natürlich auch schon entsprechende jQuery-Plugins, wie z.B. bindWithDelay.

Fazit

Mit der vorgestellten Methode könnt ihr eine effiziente Live-Suche oder andere auf AJAX-basierende Features umsetzen. Hierbei müsst ihr euch natürlich nicht auf das keyup-Event beschränken.

Was haltet ihr von der vorgestellten Timeout-Variante?

Kommentare  
0 Kommentare vorhanden
0 Trackbacks/Pingbacks vorhanden
Du bist herzlich eingeladen auch ein Kommentar zu hinterlassen!
Kommentar schreiben

Vielen Dank für dein Kommentar!