È una buona idea usare requestAnimationFrame con una funzione di rimbalzo?

Question

Questo è un controllo sulla mia comprensione di requestAnimationFrame. Ho bisogno di una funzione debounce, poiché sto facendo qualche interazione DOM ogni volta che la finestra viene ridimensionata e non voglio sovraccaricare il browser. Una funzione di debounce tipica chiamerà la funzione passata solo una volta per intervallo; l'intervallo è solitamente il secondo argomento. Presumo che per un sacco di lavoro dell'interfaccia utente, l'intervallo ottimale è il più breve tempo che non sovraccarichi il browser. Mi sembra che questo è esattamente ciò requestAnimationFrame farebbe:

var debounce = function (func, execAsap) { 
    var timeout; 

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

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

    timeout = requestAnimationFrame(delayed); 
    }; 
} 

Il codice di cui sopra è un rip-off diretto the above debounce link, ma con requestAnimationFrame usato al posto di setTimeout. A mio avviso, questo accoderà la funzione passata il prima possibile, ma tutte le chiamate che arrivano più velocemente di quanto il browser possa gestire verranno eliminate. Questo dovrebbe produrre l'interazione più liscia possibile. Sono sulla buona strada? O sto fraintendendo lo requestAnimationFrame?

(Naturalmente questo funziona solo su browser moderni, ma ci sono semplici polyfills per requestAnimationFrame che appena cadono di nuovo a setTimeout.)

Answer 1

Questo funzionerà.

E 'un avvertimento che può o non può essere importante per voi:

Se la pagina non è attualmente visibile, animazioni su quella pagina possono essere strozzato pesantemente in modo che non si aggiornano spesso e consumano quindi poca potenza della CPU.

Quindi, se per qualche motivo la cura di questo per la funzione che si sta debouncing, si sta meglio utilizzando setTimeout(fn, 0)

caso contrario, se si sta utilizzando questo per le animazioni, questo è l'utilizzo previsto di requestAnimationFrame