Rileva quando una finestra viene ridimensionata usando JavaScript?

Esiste un modo con jQuery o JavaScript per attivare una funzione quando l'utente termina di ridimensionare la finestra del browser?

In altri termini:

1. Posso rilevare l'evento del mouse su quando l'utente sta ridimensionando la finestra del browser? Altrimenti:
2. Posso rilevare quando un'operazione di ridimensionamento della finestra è terminata?

Al momento sono in grado di attivare un evento solo quando l'utente inizia a ridimensionare la finestra con jQuery

È possibile utilizzare .resize()per ottenere ogni volta che la larghezza / altezza effettivamente cambia, in questo modo:

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

Puoi visualizzare una demo funzionante qui , prende i nuovi valori di altezza / larghezza e li aggiorna nella pagina per farti vedere. Ricorda che l'evento non inizia o finisce davvero , ma "succede" quando si verifica un ridimensionamento ... non c'è nulla da dire che non accadrà un altro.

Modifica: dai commenti sembra che tu voglia qualcosa di simile a un evento "end-end", la soluzione che hai trovato fa questo, con alcune eccezioni (non puoi distinguere tra un mouse-up e una pausa in un modo cross-browser, lo stesso per una fine contro una pausa ). Puoi creare quell'evento, per renderlo un po 'più pulito, in questo modo:

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

Potresti avere questo file di base da qualche parte, qualunque cosa tu voglia fare ... quindi puoi associare a quel nuovo resizeEndevento che stai attivando, in questo modo:

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

Potete vedere una demo funzionante di questo approccio qui

Ciò può essere ottenuto con la proprietà onresize dell'interfaccia GlobalEventHandlers in JavaScript, assegnando una funzione alla proprietà onresize , in questo modo:

window.onresize = functionRef;

Il seguente frammento di codice lo dimostra, eseguendo la console registrando innerWidth e innerHeight della finestra ogni volta che viene ridimensionato. (L'evento di ridimensionamento viene generato dopo il ridimensionamento della finestra)

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>

Un altro modo per farlo, usando solo JavaScript, sarebbe questo:

window.addEventListener('resize', functionName);

Questo si attiva ogni volta che le dimensioni cambiano, come l'altra risposta.

functionName è il nome della funzione eseguita quando la finestra viene ridimensionata (le parentesi alla fine non sono necessarie).

Se vuoi controllare solo al termine dello scorrimento, in Vanilla JS, puoi trovare una soluzione come questa:

Super Super compatto

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

Tutte e 3 le possibili combinazioni insieme (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') 
}