Disminuir la frecuencia de eventos Javascript de votación

Question

¿Cómo se reduce la frecuencia de sondeo de eventos de JavaScript? Los acontecimientos que me preocupa son onResize y OnScroll . Estos eventos pueden ser desencadenados decenas de veces por segundo cuando alguien cambia el tamaño de su navegador o se desplaza hacia abajo, respectivamente. Me gustaría que estos eventos a ocurrir sólo una vez cada 500 ms, de modo que no tengo que pasar horas optimizar mis controladores de eventos y asegurarse de que no lo hacen pérdida de memoria.

Answer 1

var resizeTimeout;

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

});

Esto activará la función setTimeout() ~ 500 ms después de que hayan terminado el cambio de tamaño.

La versión onscroll es muy similar:)

Answer 2

No se puede realmente controlar con qué frecuencia se activa el evento, se puede hacer algo como recordar el momento de la primera cocción de eventos, a continuación, en cada consecuente uno de comprobar si se trata de más de 500 ms de primero - en caso afirmativo, se procede con el controlador de eventos, de lo contrario se acaba de salir de la hanlder evento

Answer 3

Al comienzo de su controlador, compruebe si 500ms han pasado desde la última, y ??acaba de regresar si no.

Answer 4

No se puede evitar que estos eventos se dispare. Siempre lo hacen. Lo que se quiere hacer es dejar de escuchar de inmediato, a continuación, controlar el evento a la repetición evitar. Entonces todo el controlador está configurado de nuevo después de setTimeout. No más recursividad sucede a menos que alguien cambia el tamaño de la ventana. Yo uso 5000ms aquí ya que es más fácil de ver su funcionamiento en la consola. No se debe ver más de un correo no deseado en el FF consola 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 se debe hacer nada cada vez que los fuegos Handler es todavía técnicamente disparando un controlador y una sentencia if + búsqueda. Eso puede ser pesado.

Answer 5

comprobar el carácter de subrayado antirrebote función

Crea y devuelve una nueva versión antirrebote de la función pasada que posponer su ejecución hasta después de milisegundos de espera han transcurrido desde la última vez que se invoca. Útil para implementar un comportamiento que sólo debería ocurrir cuando la entrada ha dejado de llegar. Por ejemplo:. Renderizado una vista previa de un comentario de rebajas, volver a calcular un diseño después de la ventana ha dejado de ser redimensionada, y así sucesivamente

Ejemplo:

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

Answer 6

Yo solía hacerlo como en la respuesta aceptada, pero el problema es que sólo se activa después de que el tiempo de espera especificado. Yo quería una solución que maneja 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 occured within a certain period of time

        _resize_scheduler();
    }
    else {

        // the resizer is busy, i.e. 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 ayuda voluntad.