Javascript a cambiar el tamaño de evento disparar varias veces mientras arrastra el cambio de tamaño manejar

Question

Estaba esperando que esto jQuery plug-in funcionaría, pero no fue así:

http://andowebsit.es/blog/noteslog.com/post/how-to-fix-the-resize-event-in-ie (enlace de edad fue noteslog.com/post/how-to -fix-the-resize-event-in-ie).

He agregado un comentario a su sitio, pero están moderados, por lo que es posible que aún no lo vea.

Pero de todos modos, déjame explicarte mi deseo. Quiero que se active un tipo de evento de "cambio de tamaño" cuando el usuario pausa su redimensión y/o completa su cambio de tamaño, no mientras que el usuario está arrastrando activamente el controlador de cambio de tamaño de la ventana del navegador. Tengo una función OnResizeHandled bastante compleja y que necesito mucho tiempo para ejecutar, pero no para ejecutarla 100 veces solo porque el usuario amplió la ventana en 100px y el evento se activó para cada píxel de movimiento. Supongo que la mejor opción sería manejarlo una vez que el usuario haya completado el cambio de tamaño.

Answer 1

Tome algunas ideas de las soluciones de concurrencia para administrar la avalancha de eventos provenientes del navegador.

Por ejemplo, cuando obtiene un evento de cambio de tamaño por primera vez, establezca un indicador en true para indicar que el usuario está actualizando el tamaño. Establezca un tiempo de espera para llamar al controlador de eventos de cambio de tamaño real después de 1 segundo. Entonces, siempre que esta bandera sea verdadera, ignore el evento de cambio de tamaño. Luego, en el controlador real, una vez que todo está hecho y es correcto, establezca la bandera en falso.

De esta manera solo procesa el último evento una vez por segundo (o algún otro período de tiempo según sus requisitos). Si el usuario hace una pausa en el medio del cambio de tamaño, se procesará. Si el usuario finalizó, se procesará.

Esto puede no ser adecuado para usted, pero hay muchas otras maneras de usar bloqueos que pueden ser más útiles.

Answer 2

¿Qué le parece establecer un tiempo de espera para cuando el usuario pausa el cambio de tamaño? Restablezca el tiempo de espera cuando se produce el cambio de tamaño, o active el controlador de eventos de cambio de tamaño si el tiempo de espera expira.

Answer 3

Dado que está construido en jQuery, ¿no puede vincular algún tipo de evento onComplete a la extensión y pasar una función que se debe ejecutar cuando se la llama?

Editar:

Cuando el usuario inicia el cambio de tamaño de la ventana, establezca un intervalo que vigila las dimensiones de la ventana. Si las dimensiones no han cambiado en un período de tiempo preestablecido de su especificación, entonces puede considerar el cambio de tamaño de ventana "completado". En este caso, su función de JavaScript sería setInterval(), que acepta dos argumentos: una función para llamar a cada tic y cuánto tiempo dura cada tic en milisegundos.

En cuanto a cómo escribir específicamente en el marco de jquery, bueno, no sé lo suficiente sobre jquery para poder decírtelo. Tal vez alguien más pueda ayudarlo más específicamente, pero al mismo tiempo puede considerar extender la extensión jquery que ya ha vinculado con un evento onComplete que funciona como lo acabo de describir.

Answer 4

¿Qué tal un código como el siguiente:

function resizeStuff() { 
//Time consuming resize stuff here 
} 
var TO = false; 
$(window).resize(function(){ 
if(TO !== false) 
    clearTimeout(TO); 
TO = setTimeout(resizeStuff, 200); //200 is time in miliseconds 
}); 

Eso debe asegurarse de que la función solo cambia de tamaño cuando el usuario deja de cambiar el tamaño.

Answer 5

Paul Irish tiene un gran Debounced jQuery plugin que resuelve este problema.

Answer 6

He extendido hace algunos días el jQuery predeterminado on -event-handler. Se adjunta una función de controlador de eventos para uno o más eventos a los elementos seleccionados si el evento no se desencadenó para un intervalo determinado. Esto es útil si desea activar una devolución de llamada solo después de un retraso, como el evento de cambio de tamaño, o bien. https://github.com/yckart/jquery.unevent.js

;(function ($) { 
    var methods = { on: $.fn.on, bind: $.fn.bind }; 
    $.each(methods, function(k){ 
     $.fn[k] = function() { 
      var args = [].slice.call(arguments), 
       delay = args.pop(), 
       fn = args.pop(), 
       timer; 

      args.push(function() { 
       var self = this, 
        arg = arguments; 
       clearTimeout(timer); 
       timer = setTimeout(function(){ 
        fn.apply(self, [].slice.call(arg)); 
       }, delay); 
      }); 

      return methods[k].apply(this, isNaN(delay) ? arguments : args); 
     }; 
    }); 
}(jQuery)); 

Se usa como cualquier otro on o bind manejador -Evento, excepto que se puede pasar un parámetro adicional como último:

$(window).on('resize', function(e) { 
    console.log(e.type + '-event was 200ms not triggered'); 
}, 200); 

http://jsfiddle.net/ARTsinn/EqqHx/

Answer 7

Si usted está en las bibliotecas , debe marcar subrayado, subrayado ya maneja su necesidad y muchos más que probablemente tendrá en sus proyectos.

aquí es un ejemplo de cómo circuito antirrebote subrayado funciona:

// declare Listener function 
var debouncerListener = _.debounce(function(e) { 

    // all the actions you need to happen when this event fires 

}, 300); // the amount of milliseconds that you want to wait before this function is called again 

luego simplemente llamar a esa función antirrebote en el cambio de tamaño de la ventana

window.addEventListener("resize", debouncerListener, false); 

de pago y envío todas las funciones de subrayado disponible aquí http://underscorejs.org/