Evento de cambio de tamaño de DOM

Question

si tengo esto

window.onresize = function() {
  alert('resized!!');
};

Mi función se activa varias veces a lo largo de el cambio de tamaño, pero quiero capturar el terminación del cambio de tamaño.Esto está en IE.

¿Algunas ideas?Hay varias ideas por ahí, pero hasta ahora no me ha funcionado (por ejemplo, el supuesto evento window.onresizeend de IE).

Answer 1

En este caso, lo haría fuertemente sugerir eliminación de rebotes. La forma más sencilla, eficaz y fiable para hacer esto en JavaScript que he encontrado es plugin de jQuery de Ben Alman, acelerador / de rebote . (se puede usar con o sin jQuery - sé que suena extraño ...)

Con la eliminación de rebotes, el código para hacer esto sería tan simple como:

$(window).resize($.debounce(1000, function() {
   // Handle your resize only once total, after a one second calm.
   ...
}));

La esperanza que puede ayudar a alguien. ;)

Answer 2

Yo siempre uso este cuando quiero hacer algo después de cambiar el tamaño. Las llamadas a setTimeout y clearTimeout no son de ningún impacto notable en la velocidad del cambio de tamaño, así que no es un problema que éstos se llaman varias veces.

var timeOut = null;
var func = function() { /* snip, onresize code here */};
window.onresize = function(){
   if(timeOut != null) clearTimeout(timeOut);
   timeOut = setTimeout(func, 100);
}

Answer 3

Este es no es perfecto , pero hay que darle el comienzo que necesita.

var initialX = null;
var initialY = null;
var lastResize = null;
var waiting = false;
var first = true;
var id = 0;

function updateResizeTime()
{
    if (initialX === event.clientX && initialY === event.clientY)
    {
        return;
    }

    initialX = event.clientX;
    initialY = event.clientY;

    if (first)
    {
        first = false;
        return;
    }

    lastResize = new Date();            
    if (!waiting && id == 0)
    {
        waiting = true;
        id = setInterval(checkForResizeEnd, 1000);
    }
}

function checkForResizeEnd()
{
    if ((new Date()).getTime() - lastResize.getTime() >= 1000)
    {
        waiting = false;
        clearInterval(id);
        id = 0;
        alert('hey!');
    }
}

window.onresize = function()
{
    updateResizeTime();
}

Answer 4

Se obtiene múltiples eventos porque en realidad son múltiples eventos. Ventanas anima el cambio de tamaño al hacer varias veces a medida que arrastra la ventana (por defecto, se puede cambiar en el registro creo).

Lo que podría hacer es añadir un retardo. Hacer un clearTimeout, setTimout (myResize, 1000) cada vez que se activa el evento de IE. Entonces, sólo el último va a hacer el cambio de tamaño real.

Answer 5

No estoy seguro si esto podría ayudar, pero ya que parece estar funcionando perfectamente, aquí está. Me he tomado el fragmento de la entrada anterior y modificado ligeramente. El doCenter función () se traduce primero px a em y que sustrae la anchura del objeto y divide el resto por 2. El resultado se asigna como margen izquierdo. doCenter () se ejecuta para centrar el objeto. incendios de tiempo de espera cuando la ventana se cambia el tamaño de ejecución doCenter () de nuevo.

function doCenter() {
document.getElementById("menuWrapper").style.position = "fixed";
var getEM = (window.innerWidth * 0.063);
document.getElementById("menuWrapper").style.left = (getEM - 40) / 2 + "em";
}

doCenter();

var timeOut = null;
var func = function() {doCenter()};
window.onresize = function(){
    if (timeOut != null) clearTimeout(timeOut);
    timeOut = setTimeout(func, 100);
};

Answer 6

solución simple y pura de JavaScript, simplemente cambie el valor 1000 int para que sea menor para obtener una mayor capacidad de respuesta

        var resizing = false;
        window.onresize = function() {
            if(resizing) return;
            console.log("resize");
            resizing = true;
            setTimeout(function() {resizing = false;}, 1000);
        };

Answer 7

Me gustó solución elegante de Pim Jager, aunque creo que hay una paren adicionales al final y creo que tal vez el setTimeout debe ser "timeout = setTimeout (func, 100);"

Aquí está mi versión utilizando Dojo (asumiendo una función llamada demo_resize definido ()) ...

var _semaphorRS = null;
dojo.connect(window,"resize",function(){
 if (_semaphorRS != null) clearTimeout(_semaphorRS);
 _semaphorRS = setTimeout(demo_resize, 500);
 });

Nota:. En mi versión se requiere que la paren se arrastran