Hallo,
Ich möchte eine Funktion wie change die ausgeführt wird wenn sich die größe des Browserfenster ändert.
Ich möchte eine Funktion wie change die ausgeführt wird wenn sich die größe des Browserfenster ändert.
-
-
PHP-Code:<script>
$( window ).resize(function(e) {
console.log('resized', e);
});
</script>
-
Beachte, dass das resize Event permanent abgefeuert wird während Du die Größe änderst.
folgender Code macht das deutlich.
Du solltest also nicht allzuviel innerhalb der Funktion erledigen...HTML-Code:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p id="test"></p> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script> (function() { var i=0; $( window ).resize(function(e) { i++ $('#test').html(i+' Funktionsaufrufe'); }); })(); </script> </body> </html>
Wenn Du lieber warten willst, bis resize erledigt ist, betrachte folgenden Code. (Eine Wartezeit von 200ms genügt in der Regel)
Da obige gilt für jQuery und ist eine ausführliche Version...HTML-Code:<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <p id="test"></p> <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> <script> (function() { var resizeWait; $(window).resize(function() { clearTimeout(resizeWait); resizeWait = setTimeout(resizeFinished, 200); }); function resizeFinished(){ $('#test').html('resize finished'); } })(); </script> </body> </html>
Ohne jQuery mit Arrow´s und (Aus)Nutzung der HTML5 Spezifikation geht das auch kürzer
HTML-Code:<!doctype html> <title>On Resize Finished</title> <p id=test> <script> (() => { var resizeWait, resizeFinished = () => test.innerHTML+='finished'; window.onresize = () => { clearTimeout(resizeWait); resizeWait = setTimeout(resizeFinished, 200); } })(); </script>
Kommentar
-
Ach, da geht noch was:
PHP-Code:t=onresize=e=>clearTimeout(t)&(t=setTimeout(x=>alert('finished'),500))
[SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]Kommentar
-
Da geht doch tatsächlich noch was:Zitat von lottikarotti Beitrag anzeigenAch, da geht noch was:
PHP-Code:t=onresize=e=>clearTimeout(t)&(t=setTimeout(x=>alert('finished'),500))
Aber gut gemacht, Function resizeFinish anonymisiert, verkettete Variablenzuweisung, Namen ersetzt.HTML-Code:t=onresize=e=>clearTimeout(t)&(t=setTimeout('alert("finished")',500))
Es war wirklich schwer noch etwas zu kürzen...
Hoffentlich sieht Hellbringer das nicht, er wird uns gut zurechtstutzen..Kommentar
-
[SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]Kommentar
-
Super - musste ich erst mal hinschreiben..Zitat von lottikarotti Beitrag anzeigen
um das nachzuvollziehen darf natürlich strict nicht benutzt werden.HTML-Code:t = onresize = function (e) { clearTimeout(t, t = setTimeout('alert("finished")', 500)); };
Wobei man das Ganze natürlich nur als Spielerei betrachten sollte, nicht dass irgendeiner auf die Idee kommt wir würden solchen Quatsch im realen Programmieralltag veranstalten....HTML-Code:s=a=>console.log(a) s(12,x=13,y=14) //Variablenzuweisungen an Funktionsaufruf gehängt console.log(y) //wurde im Funktionsaufruf deklariert clearTimeout(y) //bringt keinen Fehler - wie praktisch
Kommentar
Kommentar