取消請求動畫幀是否有優化？

Question

會不會有什麼好處（或甚至可能在window.cancelAnimationFrame();下面？

這個例子如果是這樣，我怎麼會這麼做，爲什麼？

Ref: requestAnimationFrame MDN

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; 
}); 

Answer 1

你可以避開匿名通過直接傳遞doSomething作爲Raf參數，並通過直接包括在ticking = false功能doSomething。

你也可以刪除last_known_scroll_position變量聲明，因爲它只是window.scrollY，這也消除了需要將參數設置爲doSomething。 順便說一下，最好使用pageYOffset而不是scrollY，以獲得更廣泛的瀏覽器支持。

否則，你的邏輯是好的。

此標誌將避免堆疊其他函數調用時，一個已經在等待，並利用cancelAnimationFrame將剛纔unecessarely與創建該匿名函數的充滿了你的記憶，迫使過早GC踢。

所以一旦施加的一切，你有這樣的：

var ticking = false; 

function doSomething() { 
    ticking = false; 
    var scroll_pos = window.pageYOffset; 
    // do something with the scroll position 

} 

window.addEventListener('scroll', function(e) { 
    if (!ticking) { 
    window.requestAnimationFrame(doSomething); 
    } 
    ticking = true; 
});