Erkennen, wann die Größe eines Fensters mithilfe von JavaScript geändert wird?

Gibt es eine Möglichkeit mit jQuery oder JavaScript, eine Funktion auszulösen, wenn der Benutzer die Größe des Browserfensters ändert?

Mit anderen Worten:

1. Kann ich ein Mouse-Up-Ereignis erkennen, wenn der Benutzer die Größe des Browserfensters ändert? Andernfalls:
2. Kann ich erkennen, wann ein Vorgang zum Ändern der Fenstergröße abgeschlossen ist?

Ich kann derzeit nur ein Ereignis auslösen, wenn der Benutzer die Größe des Fensters mit jQuery ändert

Sie können verwenden .resize(), um jedes Mal abzurufen, wenn sich die Breite / Höhe tatsächlich ändert, wie folgt:

$(window).resize(function() {
  //resize just happened, pixels changed
});

Sie können hier eine funktionierende Demo anzeigen. Sie übernimmt die neuen Höhen- / Breitenwerte und aktualisiert sie auf der Seite, damit Sie sie sehen können. Denken Sie daran, dass das Ereignis nicht wirklich beginnt oder endet , sondern nur "passiert", wenn eine Größenänderung auftritt. Es gibt nichts zu sagen, dass ein anderes Ereignis nicht passieren wird.

Bearbeiten: Nach Kommentaren scheint es so, als ob Sie so etwas wie ein "On-End" -Ereignis wollen. Die Lösung, die Sie gefunden haben, tut dies mit wenigen Ausnahmen (Sie können browserübergreifend nicht zwischen Mouse-up und Pause unterscheiden). das gleiche für ein Ende gegen eine Pause ). Sie können dieses Ereignis jedoch erstellen , um es ein bisschen sauberer zu machen:

$(window).resize(function() {
    if(this.resizeTO) clearTimeout(this.resizeTO);
    this.resizeTO = setTimeout(function() {
        $(this).trigger('resizeEnd');
    }, 500);
});

Sie könnten haben, dass dies irgendwo eine Basisdatei ist, was auch immer Sie tun möchten ... dann können Sie sich an das neue resizeEndEreignis binden, das Sie auslösen, wie folgt:

$(window).bind('resizeEnd', function() {
    //do something, window hasn't changed size in 500ms
});

Sie können eine Arbeits Demo dieses Ansatzes sehen hier

Dies kann mit der Eigenschaft onresize der GlobalEventHandlers-Schnittstelle in JavaScript erreicht werden, indem der Eigenschaft onresize eine Funktion zugewiesen wird , z.

window.onresize = functionRef;

Das folgende Codefragment demonstriert dies, indem die Konsole die innere Breite und innere Höhe des Fensters protokolliert, wenn die Größe geändert wird. (Das Größenänderungsereignis wird ausgelöst, nachdem die Fenstergröße geändert wurde.)

function resize() {
  console.log("height: ", window.innerHeight, "px");
  console.log("width: ", window.innerWidth, "px");
}

window.onresize = resize;

<p>In order for this code snippet to work as intended, you will need to either shrink your browser window down to the size of this code snippet, or fullscreen this code snippet and resize from there.</p>

Eine andere Möglichkeit, dies nur mit JavaScript zu tun, wäre folgende:

window.addEventListener('resize', functionName);

Dies wird jedes Mal ausgelöst, wenn sich die Größe ändert, wie bei der anderen Antwort.

functionName ist der Name der Funktion, die ausgeführt wird, wenn die Fenstergröße geändert wird (die Klammern am Ende sind nicht erforderlich).

Wenn Sie in Vanilla JS nur überprüfen möchten, wann der Bildlauf beendet ist, können Sie eine Lösung wie die folgende finden:

Super Super kompakt

var t
window.onresize = () => { clearTimeout(t) t = setTimeout(() => { resEnded() }, 500) }
function resEnded() { console.log('ended') }

Alle 3 möglichen Kombinationen zusammen (ES6)

var t
window.onresize = () => {
    resizing(this, this.innerWidth, this.innerHeight) //1
    if (typeof t == 'undefined') resStarted() //2
    clearTimeout(t); t = setTimeout(() => { t = undefined; resEnded() }, 500) //3
}

function resizing(target, w, h) {
    console.log(`Youre resizing: width ${w} height ${h}`)
}    
function resStarted() { 
    console.log('Resize Started') 
}
function resEnded() { 
    console.log('Resize Ended') 
}