Abbassare la frequenza di Javascript polling dell'evento

Question

Come si fa a ridurre la frequenza di javascript polling dell'evento? Gli eventi Sono preoccupato sono onResize e onscroll . Questi eventi possono essere attivati ??decine di volte al secondo quando qualcuno ridimensiona il loro browser o scorre verso il basso, rispettivamente. Mi piacerebbe questi eventi per accadere solo una volta ogni 500 ms in modo da non dover passare ore l'ottimizzazione dei miei gestori di eventi e fare in modo che non lo fanno perdita di memoria.

Answer 1

var resizeTimeout;

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

});

Questo attiverà la funzione setTimeout() ~ 500 ms dopo che la persona ha il ridimensionamento finito.

La versione onscroll è molto simile:)

Answer 2

Non puoi davvero controllare la frequenza con cui viene generato l'evento, si può fare qualcosa di simile a ricordare il tempo della prima cottura evento, poi su ogni conseguente uno di verificare se si tratta di più di 500 ms dalla prima - in caso affermativo, si procede con il gestore di eventi, altrimenti basta uscire dal hanlder evento

Answer 3

All'inizio del vostro gestore, controllare per vedere se 500ms sono passati da quando l'ultimo, e solo il ritorno se non.

Answer 4

Non si può impedire questi eventi di sparare. Lo fanno sempre. Che cosa si vuole fare è ascoltare fermata immediatamente, quindi gestire l'evento per evitare ripetizioni. Poi l'intero gestore viene nuovamente impostata dopo setTimeout. Non più ricorsione accade a meno che qualcuno ridimensiona la finestra. Io uso 5000ms qui come è più facile vederlo lavorare nella console. Si consiglia di non vedere più di uno spam FF console ogni 5 secondi, anche se si ridimensiona come una spaz.

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

Usando la logica per decidere se fare qualcosa ogni volta che i fuochi gestore è ancora tecnicamente sparando un gestore e un if + lookup. Che può avere pesanti.

Answer 5

antirimbalzo funzione

  

crea e restituisce una nuova versione della funzione adattato dal passato che ritarderà la sua esecuzione fino a dopo millisecondi di attesa sono trascorsi dall'ultima volta che è stato invocato. Utili per implementare un comportamento che dovrebbe avvenire solo dopo l'ingresso ha smesso di arrivo. Per esempio:. Rendering di un'anteprima di un commento Markdown, ricalcolando un layout dopo la finestra ha smesso di essere ridimensionata, e così via

Esempio:

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

Answer 6

ho usato per farlo come sulla risposta accettata ma il problema è, si innesca solo dopo il timeout specificato. Volevo una soluzione che gestisce il ridimensionamento subito, la prima volta. Ecco quello che ho finito per fare.

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
    //...
}

spero che questo aiuto sarà.