1
Я пришел через этот пример на MDN, который использует requestAnimationFrame вместо setTimeout:Есть ли какое-либо преимущество использования requestAnimationFrame вместо SetTimeout для дребезга/дросселя
// Reference: http://www.html5rocks.com/en/tutorials/speed/animations/
var last_known_scroll_position = 0;
var ticking = false;
function doSomething(scroll_pos) {
// do something with the scroll position
}
window.addEventListener('scroll', function(e) {
last_known_scroll_position = window.scrollY;
if (!ticking) {
window.requestAnimationFrame(function() {
doSomething(last_known_scroll_position);
ticking = false;
});
}
ticking = true;
});
И это заставило меня задуматься, можно ли использовать requestAnimationFrame вместо setTimeout(fn, 0) и если есть какое-то преимущество для этого? Я googled, и кажется, что все сравнения выполняются в контексте анимации, но как насчет несвязанной функциональности - например, debounce/throttle или просто, если вам нужно запустить код после перерисовки?
SetTimeout регистрирует событие для необходимого тика. Поэтому, если перед вами большая задача, которая принимает 5 тиков, ваша функция будет выполняться позже. Это может привести к некоторым проблемам, если у вас есть одна и та же функция, работающая при каждом тике. requestAnimationFrame будет пропускать все отложенные задачи и процессы на основе текущего времени. Таким образом, в этом случае будет выполняться только последняя задача. Вы можете проверить следующее сообщение: http://stackoverflow.com/questions/13935262/settimeout-or-setinterval-or-requestanimationframe – Rajesh
Преимущество RequestAnimationFrame заключается в том, что он предназначен для работы во время ваших мониторов следующий розыгрыш. IOW Предназначен для предотвращения мерцания/разрыва. Из-за этого преимущества setTimeout в HTML5 он может запускать каждые 4 мс, поэтому быстрее. Но я верю, что самый быстрый - Postmessage. – Keith