DOM onresize caso

Question

si tengo esta

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

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

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

Answer 1

En este caso, me gustaría sugerir fuertemente eliminación de rebotes. La manera más simple, efectiva y confiable de hacer esto en JavaScript que he encontrado es Ben Alman's jQuery plugin, Throttle/Debounce (se puede usar con o sin jQuery, lo sé ... suena extraño).

con supresió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. 
    ... 
})); 

esperanza que puede ayudar a alguien. ;)

Answer 2

Obtienes múltiples eventos porque realmente hay varios 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 3

Esto es no perfecto pero debería darle el inicio 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

Siempre uso esto cuando quiero hacer algo después del cambio de 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 5

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 al final.

Answer 6

No estoy seguro de si esto podría ayudar, pero dado que parece funcionar perfectamente, aquí está. He tomado el fragmento de la publicación anterior y lo he modificado 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 7

sencilla solución javascript puro, sólo cambia el valor 1000 int a ser menor para obtener más capacidad de respuesta

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