Javascript onResize Event fehlt?!

Responsive Webdesign ist derzeit das ganz große Thema im Web, und während der Entwicklung bin ich heute über ein richtig witziges Problem gestolpert.

Zum Einsatz kam dabei ein Javascript-Slider welcher die Größe per Javascript an das Browserfenster anpasst… meistens zumindest, denn manchmal funktioniert es einfach nicht.
Nach einigem herumstochern im Code sah es so aus als würde das resize-Event einfach fehlen, doch es handelt sich hierbei wohl eher um eine Race-Condition bei der die resize-Events des Browsers einfach schneller eintreffen als der Code die Seite neu rendert. Dadurch kam es ab und zu eben zu solch einem Fall, dass die alte Berechnung als letzte Änderung aufschlug und der Slider die falsche Höhe bekam.

Abhilfe gibt es in solchen Fällen leider nicht so wirklich, der Lösungweg ist äußerst hässlich. Aber vielleicht hilft das Snippet ja dem einen oder anderen der in der selben Lage ist und nicht einfach so schnell mal den Code robuster gestalten kann weil er an eine Library gebunden ist oder ähnliches.
(Richtig wäre, die Events mit einem leichtgewichtigen Handler abzufangen und dann, nach einem gewissen Timeout zu rendern oder eben vor dem Auftrag des neuen Events die Queue an Berechnungen vorher leeren)

Das Code-Snippet sieht wie folgt aus: (benötigt jQuery)

(function(a,b,c,d){var e=0;var f=0;a.setInterval(function(){var c=b(a).height();var g=b(a).width();if(e!=c||f!=g){var h=b.Event("resize");b(a).trigger(h);a.setTimeout(function(){e=c;f=g},d)}},c)})(window,jQuery,200,3000)

Was es tut ist relativ einfach:

Alle 200ms wird überprüft ob sich die Browsergröße geändert hat. Hat sich die Browsergröße in den letzten 3000ms geändert, so wird bei jedem Durchlauf ein resize-Event gefeuert. Insgesamt also 15 Events auf 3 Sekunden verteilt. Das sollte auch dem langsamsten Code ausreichen.

Die 200ms und 3000ms sind im Funktionsaufruf konfigurierbar und nach belieben anpassbar. Für langsame Scripte nach oben, für Scripte die sich nur wenig danebenbenehmen nach unten.