¿Detecta cuándo se redimensiona una ventana usando JavaScript?

¿Hay alguna forma con jQuery o JavaScript para activar una función cuando el usuario termina de cambiar el tamaño de la ventana del navegador?

En otros terminos:

1. ¿Puedo detectar el evento de mouse up cuando el usuario cambia el tamaño de la ventana del navegador? De otra manera:
2. ¿Puedo detectar cuando finaliza una operación de cambio de tamaño de ventana?

Actualmente solo puedo activar un evento cuando el usuario comienza a cambiar el tamaño de la ventana con jQuery

Puede usar .resize()para obtener cada vez que el ancho / alto realmente cambia, como este:

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

Puede ver una demostración en funcionamiento aquí , toma los nuevos valores de alto / ancho y los actualiza en la página para que los vea. Recuerde que el evento realmente no comienza ni finaliza , simplemente "sucede" cuando ocurre un cambio de tamaño ... no hay nada que decir que no sucederá otro.

Editar: por comentarios parece que quiere algo así como un evento "al final", la solución que encontró hace esto, con algunas excepciones (no puede distinguir entre un mouse-up y una pausa en una forma de navegador cruzado, lo mismo para un final frente a una pausa ). Sin embargo, puede crear ese evento para hacerlo un poco más limpio, como este:

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

Podría tener este es un archivo base en algún lugar, lo que sea que quiera hacer ... luego puede vincularse al nuevo resizeEndevento que está activando, de esta manera:

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

Se puede ver una demostración de trabajo de este enfoque aquí

Esto se puede lograr con la propiedad onresize de la interfaz GlobalEventHandlers en JavaScript, asignando una función a la propiedad onresize , de esta manera:

window.onresize = functionRef;

El siguiente fragmento de código lo demuestra al registrar la consola innerWidth y innerHeight de la ventana cada vez que se cambia el tamaño. (El evento de cambio de tamaño se dispara después de que la ventana ha cambiado de tamaño)

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>

Otra forma de hacerlo, usando solo JavaScript, sería esta:

window.addEventListener('resize', functionName);

Esto se dispara cada vez que cambia el tamaño, como la otra respuesta.

functionName es el nombre de la función que se ejecuta cuando se cambia el tamaño de la ventana (los corchetes al final no son necesarios).

Si desea verificar solo cuando finaliza el desplazamiento, en Vanilla JS, puede encontrar una solución como esta:

Súper súper compacto

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

Las 3 combinaciones posibles juntas (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') 
}