javascript - ¿Cómo esperar al 'fin' del evento 'resize' y solo entonces realizar una acción?

Así que actualmente uso algo como:

$(window).resize(function(){resizedw();});

Pero esto se llama muchas veces mientras el proceso de cambio de tamaño está en curso. ¿Es posible capturar un evento cuando termina?

Respuesta #1

Puedes usar setTimeout() y clearTimeout()

function resizedw(){
    // Haven't resized in 100ms!
}

var doit;
window.onresize = function(){
  clearTimeout(doit);
  doit = setTimeout(resizedw, 100);
};

Ejemplo de código en jsfiddle.

Respuesta #2

Tuve suerte con la siguiente recomendación: http://forum.jquery.com/topic/the-resizeend-event

Aquí está el código para que no tengas que buscar en el enlace y la fuente de su publicación:

var rtime;
var timeout = false;
var delta = 200;
$(window).resize(function() {
    rtime = new Date();
    if (timeout === false) {
        timeout = true;
        setTimeout(resizeend, delta);
    }
});

function resizeend() {
    if (new Date() - rtime < delta) {
        setTimeout(resizeend, delta);
    } else {
        timeout = false;
        alert('Done resizing');
    }               
}

¡Gracias sime.vidas por el código!

Respuesta #3

Este es el código que escribí según la respuesta de @Mark Coleman:

$(window).resize(function() {
    clearTimeout(window.resizedFinished);
    window.resizedFinished = setTimeout(function(){
        console.log('Resized finished.');
    }, 250);
});

¡Gracias, Mark!

Respuesta #4

Internet Explorer proporciona un evento resizeEnd. Otros navegadores activarán el evento resize muchas veces mientras estás redimensionando.

Hay otras grandes respuestas aquí que muestran cómo usar setTimeout y los métodos .throttle, .debounce de lodash y underscore, así que mencionaré el plugin jQuery throttle-debounce de Ben Alman que logra lo que buscas.

Supongamos que tienes esta función que quieres activar después de un cambio de tamaño:

function onResize() {
  console.log("Resize just happened!");
};

Ejemplo de Throttle
En el siguiente ejemplo, onResize() solo se llamará una vez cada 250 milisegundos durante un cambio de tamaño de la ventana.

$(window).resize( $.throttle( 250, onResize) );

Ejemplo de Debounce
En el siguiente ejemplo, onResize() solo se llamará una vez al final de una acción de redimensionamiento de ventana. Esto logra el mismo resultado que @Mark presenta en su respuesta.

$(window).resize( $.debounce( 250, onResize) );

Respuesta #5

Hay una solución elegante utilizando Underscore.js. Entonces, si lo estás usando en tu proyecto, puedes hacer lo siguiente -

$( window ).resize( _.debounce( resizedw, 500 ) );

Esto debería ser suficiente :) Pero, si estás interesado en leer más sobre eso, puedes consultar mi publicación en el blog - http://rifatnabi.com/post/detect-end-of-jquery-resize-event-using-underscore-debounce(enlace muerto)

Respuesta #6

Hay un método mucho más sencillo para ejecutar una función al final del cambio de tamaño que calcular el tiempo delta entre dos llamadas, simplemente hazlo así:

var resizeId;
$(window).resize(function() {
    clearTimeout(resizeId);
    resizeId = setTimeout(resizedEnded, 500);
});

function resizedEnded(){
    ...
}

Y el equivalente para Angular2:

private resizeId;
@HostListener('window:resize', ['$event'])
onResized(event: Event) {
  clearTimeout(this.resizeId);
  this.resizeId = setTimeout(() => {
    // Your callback method here.
  }, 500);
}

Para el método angular, utiliza la notación () => { } en el setTimeout para preservar el alcance, de lo contrario no podrás hacer ninguna llamada a funciones ni usar this.

Respuesta #7

Una solución es extender jQuery con una función, por ejemplo: resized

$.fn.resized = function (callback, timeout) {
    $(this).resize(function () {
        var $this = $(this);
        if ($this.data('resizeTimeout')) {
            clearTimeout($this.data('resizeTimeout'));
        }
        $this.data('resizeTimeout', setTimeout(callback, timeout));
    });
};

Uso de ejemplo:

$ (window).redimensionado(miManejador, 300);