Wir starten das neue Jahr mit einer Serie zu einem wichtigen, aber häufig vernachlässigten, Thema: die „User Experience“ (kurz UX). Es gibt wahnsinnig viele Kleinigkeiten die unseren Benutzern helfen können ein Produkt (wie z.B. eine Webseite oder Web-Applikation) besser zu nutzen.
In diesem ersten Teil möchte ich speziell auf „verzögerte Filter- / Suchfunktionen“ eingehen.

Verzögerte Filter- / Suchfunktion… Was ist das?

Einige kennen diese „Funktion“ oder haben sie bereits unbewusst kennengelernt: Wenn ihr in ein Filter- oder Suchfeld anfangt einen String zu schreiben wird nicht zwangsläufig für jedes eingetipptes Zeichen die Suchlogik getriggert. Erst wenn ihr kurz pausiert, passiert was!

Wie sieht sowas im Code aus?

Natürlich gibt es auch Heute etwas Code für euch zum anschauen, verstehen, kopieren und selbst benutzen 🙂 Hier also eine kleine „delay“ Funktion:

var delay = (function () {
   var timer = 0;
   return function (callback, ms) {
      clearTimeout(timer);
      timer = setTimeout(callback, ms);
   };
})();

Ich möchte kurz erklären was hier passiert: Jedes mal, wenn wir die „delay“ Funktion aufrufen wird der timer entfernt und sofort neu gesetzt. Wird innerhalb der angegebenen „ms“ erneut die delay Funktion gerufen, wird der timer erneut entfernt und neu gesetzt – Wird „delay“ allerdings nicht mehr aufgerufen, würde nach der zuletzt übergebenen Millisekunden Zahl die Callback Funktion gerufen.

Übrigens bringt MooTools eine solche Funktion von Haus aus mit, was ich wirklich sehr cool finde!

// MooTools Syntax

$('myElement').addEvent('keydown:pause(500)', function() {
   // The pause time is 500 ms.
});

Wie benutzt man die „delay“ Funktion?

In diesem Beispiel geht es um ein Suchfeld, dessen Logik im Hintergrund nur getriggert werden soll, wenn zwischen den einzelnen Tastendrucken eine Pause von 0.5 Sek vergeht. Dieses Beispiel zeigt euch außerdem, wie ihr den Kontext setzt und Parameter übergebt:

// Prototype Syntax.
function trigger_search (searchword) {
   // "this" refers to the input-field.
   // "searchword" contains the input

   // ...
}

$('search-field').on('keyup', function () {
   // bind(<context>[, <param>[, <param>, ...]])
   delay(trigger_search.bind(this, this.getValue()), 500);
});

Wieso baut man sowas ein?

Es gibt für gewöhnlich zwei Gründe, wieso man so etwas einbaut:

1. Sofern eure hinterlegte Logik Ajax-Anfragen beinhaltet wird u.a. der Server entlastet… Das erklärt sich von selbst: Weniger anfragen bedeuten weniger Auslastung!
2. Auf der anderen Seite (egal ob ihr Ajax nutzt oder nicht) wird der Client entlastet. Vor allem, wenn ihr größere Arrays filtert / durchsucht. Bei mehreren hundert Einträgen kann es schon mal stocken, wenn für jeden Tastendruck das Array durchlaufen wird!

Das Ergebnis ist eine „flüssigere“ Bedienung eures Frontends, da eure Suche / euer Filter sich nicht durch zu viele getriggerte Events verschlucken kann – Sollte es allerdings doch mal auffallen, könnt ihr die Pause-Zeit einfach etwas nach oben schrauben (es sollte allerdings unter einer Sekunde bleiben).

Mit diesen wertvollen Tipps möchte ich mich für Heute von euch verabschieden und hoffe ihr habt eine angenehme Woche! Es würde mich freuen, wenn ihr auch nächste Woche wieder rein schaut – da geht es nämlich mit dem Thema „User Experience“ weiter!
Bis dahin wünsche ich euch „Happy Coding“!