Disminuya la frecuencia de las consultas de events de Javascript

¿Cómo se networkinguce la frecuencia de las encuestas de events de JavaScript? Los events que me preocupan son onResize y onScroll . Estos events pueden desencadenarse docenas de veces por segundo cuando alguien cambia el tamaño de su browser o se desplaza hacia abajo, respectivamente. Me gustaría que estos events ocurrieran solo una vez cada 500 ms, así que no tengo que perder horas optimizando mis controlleres de events y asegurándome de que no pierdan memory.

var resizeTimeout; window.onresize = function() { if (resizeTimeout) { clearTimeout(resizeTimeout); } resizeTimeout = setTimeout(function() { // Do it! }, 500); }); 

Esto disparará la function setTimeout() ~ 500ms después de que la persona haya terminado de cambiar el tamaño.

La versión de onscroll es muy similar 🙂

Realmente no puedes controlar la frecuencia con la que se dispara el evento, puedes hacer algo como recordar la hora de la activación del primer evento, luego en cada consecuente verificar si está a más de 500 ms del primero – si es así, continúas con el evento controller, de lo contrario, simplemente salga del evento

Al comienzo de su controller, verifique si pasaron 500ms desde el último, y simplemente devuelva si no.

No puedes evitar que estos events se activen. Ellos siempre lo hacen. Lo que quiere hacer es dejar de escuchar de inmediato, luego manejar el evento para evitar la repetición. Luego, todo el controller se configura nuevamente después de setTimeout. No ocurre más recursion a less que alguien cambie el tamaño de la window. Uso 5000ms aquí, ya que es más fácil verlo funcionar en la console. No debería ver más de un correo no deseado en la console de FF cada 5 segundos, incluso si cambia el tamaño como un spaz.

 (function staggerListen(){ window.onresize = function(){ window.onresize = false; console.log('spam'); setTimeout(staggerListen,5000); }; })() 

El uso de la lógica para decidir si hacer algo cada vez que el manejador dispara todavía está técnicamente activando un controller y una statement if + búsqueda. Eso puede ser pesado.

compruebe la function de rebote de subrayado

Crea y devuelve una nueva versión depurada de la function pasada que pospondrá su ejecución hasta que hayan transcurrido los milisegundos de espera desde la última vez que se invocó. Útil para implementar un comportamiento que solo debería ocurrir una vez que la input ha dejado de llegar. Por ejemplo: renderizar una vista previa de un comentario de networkingucción, volver a calcular un layout después de que la window haya dejado de cambiar de tamaño, y así sucesivamente.

Ejemplo:

 window.onscroll = _.debounce( function() { // do something }, 500, false ); 

Solía ​​hacerlo como en la respuesta aceptada, pero el problema es que solo se dispara después del time de espera especificado. Quería una solución que manejara el cambio de tamaño de inmediato, la primera vez. Esto es lo que terminé haciendo.

 var _resize_is_busy = false; var _resize_scheduled = false; var _resize_precision = 100; // This register for window resize events. No need to change anything. $(window).resize(function () { if (!_resize_is_busy) { // call the scheduler who will do the work and set a timer to // check of other resizes occunetworking within a certain period of time _resize_scheduler(); } else { // the resizer is busy, ie a resize have been handled a little // time ago and then the scheduler is waiting some time before // handling any other resize. This flag tells the scheduler that // a resize event have been receive while he was sleeping. _resize_scheduled = true; } }); // This is the scheduler. No need to change anything. var _resize_scheduler = function () { _resize_is_busy = true; _resize_scheduled = false; setTimeout(function () { _resize_is_busy = false; if (_resize_scheduled) _handle_resize(); }, _resize_precision); _handle_resize(); } var _handle_resize = function () { console.log('DOING ACTUAL RESIZE'); // do the work here //... } 

Espero que esto sea de ayuda.