window.resize en jQuery disparar varias veces

tengo el siguiente código JavaScript/jQuery en un archivo HTML:window.resize en jQuery disparar varias veces

<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-1.6.2.min.js" 
    type="text/javascript"></script> 
    <script language="javascript"> 
    $(window).resize(function(){alert('hi');});</script> 
    </head> 
    <body> 
    resize me 
    </body> 
</html>

Parece relativamente sencillo, sin embargo, cuando me re tamaño de la ventana del navegador, recibo dos sucesivas ventanas de alerta en Chrome e IE9 y aparentemente fallo FF5.

¿Qué me estoy perdiendo? ¿Es un fuego por dimensión (x/y)?

Fuente

2011-07-12 Matt

Dispara muchas veces a medida que arrastra para cambiar el tamaño. –

Sí, acabo de hacer clic en el botón max-restore en el identificador de ventana. También disparó dos veces en ese punto. – Matt

Si desea evitar esto, eche un vistazo a este complemento: http://benalman.com/projects/jquery-throttle-debounce-plugin/ –

Lo tienes, algunos navegadores se activan al cambiar el tamaño de inicio y de nuevo en el final mientras que otros como FF disparan continuamente. La solución es usar setTimeout para evitar disparar todo el tiempo. Se puede encontrar un ejemplo here. Aquí está el código de la misma referencia:

(function($,sr){ 

    // debouncing function from John Hann 
    // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ 
    var debounce = function (func, threshold, execAsap) { 
     var timeout; 

     return function debounced() { 
      var obj = this, args = arguments; 
      function delayed() { 
       if (!execAsap) 
        func.apply(obj, args); 
       timeout = null; 
      }; 

      if (timeout) 
       clearTimeout(timeout); 
      else if (execAsap) 
       func.apply(obj, args); 

      timeout = setTimeout(delayed, threshold || 100); 
     }; 
    } 
    // smartresize 
    jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; 

})(jQuery,'smartresize'); 


// usage: 
$(window).smartresize(function(){ 
    // code that takes it easy... 
});

Fuente

2011-07-12 01:18:54 Radu

Gracias esta respuesta ayudó a resolver mi problema: http://stackoverflow.com/ preguntas/13710834/problems-with-mobiscroll-orientationchange-and-access-address-bar-crashes-some/13767875 # 13767875 – Soenhay

¿Cómo podemos desvincular este evento? – Ninjaneer

Parece que esto es un capricho específico del navegador. De acuerdo con la documentación para el evento resize:

Código

en un controlador de cambio de tamaño nunca debe depender del número de veces que el manejador se llama. Dependiendo de la implementación, cambiar el tamaño de eventos puede ser enviado continuamente mientras el cambio de tamaño está en progreso (el comportamiento típico en Internet Explorer y navegadores basados en WebKit como Safari y Chrome), o solo una vez al final de la operación de cambio de tamaño (el comportamiento típico de en algunos otros navegadores como Opera).

(el énfasis es mío)

Una solución sería establecer un temporizador y comprobar para ver si las dimensiones de la ventana han cambiado.

Fuente

2011-07-12 01:20:08

Los navegadores no activan el evento de cambio de tamaño de forma coherente. Para evitar que se active constantemente, usualmente se usa setTimeout. Aquí hay un poco más sobre esto:

JQuery: How to call RESIZE event only once it's FINISHED resizing?

JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

Fuente

2011-07-12 01:23:38 DSKrepps

aquí es un ejemplo sencillo, si el usuario deja de cambiar el tamaño de 500 ms (medio segundo) funcionas se disparará. clearTimeout evita el refire constante de su función. puedes ajustar este valor como mejor te parezca. 500 ms puede ser demasiado pronto, puede cambiarlo a 1000, depende de lo que esté haciendo dentro de la función

var resizeTimeout; 
$(window).resize(function(){ 
    clearTimeout(resizeTimeout); 
    resizeTimeout = setTimeout(function(){  
     alert('your function to run on resize'); 
    }, 500); 
});

Fuente

2011-07-12 02:29:43

window.resize en jQuery disparar varias veces

Respuesta

Cuestiones relacionadas