javascript - event - jquery detect change width div

Evento DOM onresize

Question

Si tengo esto

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

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

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

Answer 1

En este caso, recomendaría encarecidamente evitar el rebote. La forma más simple, efectiva y confiable de hacer esto en JavaScript que he encontrado es el complemento jQuery de Ben Alman, Throttle / Debounce (se puede usar con o sin jQuery, lo sé ... suena extraño).

Con el antirrebote, 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.
   ...
}));

Espero que pueda ayudar a alguien. ;)

Answer 2

Esto no es perfecto, pero debería 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 3

Me gustó la elegante solución de Pim Jager, aunque creo que hay un par adicional en el final y creo que quizás el setTimeout debería ser "timeOut = setTimeout (func, 100);"

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

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 el paren final.

Answer 4

No estoy seguro de si esto podría ayudar, pero dado que parece funcionar perfectamente, aquí está. Tomé el fragmento de la publicación anterior y lo modifiqué ligeramente. La función doCenter () primero traduce px a em y luego substrae el ancho del objeto y divide el resto por 2. El resultado se asigna como margen izquierdo. doCenter () se ejecuta para centrar el objeto. el tiempo de espera se dispara cuando se cambia el tamaño de la ventana ejecutando doCenter () nuevamente.

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 5

Obtienes eventos múltiples porque realmente hay múltiples eventos. Windows anima el cambio de tamaño haciéndolo varias veces mientras arrastra la ventana (de manera predeterminada, puede cambiarlo en el registro, creo).

Lo que podrías hacer es agregar un retraso. Realice clearTimeout, setTimout (myResize, 1000) cada vez que se active el evento IE. Entonces, solo el último hará el cambio de tamaño real.

Answer 6

Siempre uso esto cuando quiero hacer algo después de cambiar el tamaño. Las llamadas a setTimeout y clearTimeout no tienen ningún impacto notorio en la velocidad del redimensionamiento, por lo que no es un problema que se llamen 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 7

solución javascript pura simple, simplemente cambie el valor 1000 int para que sea más bajo para una mayor capacidad de respuesta

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