項目中循環計時處理某些方法的情況還是比較常見的,一般會用setInterval來處理,但是這個方法會似的頁面卡頓等使用體驗不好。
所以就使用瀏覽器提供的requestAnimationFrame方法,window.requestAnimationFrame()
告訴瀏覽器——你希望執行一個動畫,並且要求瀏覽器在下次重繪之前調用指定的回調函數更新動畫。該方法需要傳入一個回調函數作為參數,該回調函數會在瀏覽器下一次重繪之前執行,requestAnimationFrame的步伐跟着系統的刷新步伐走。它能保證回調函數在屏幕每一次的刷新間隔中只被執行一次,這樣就不會引起丟幀現象,也不會導致動畫出現卡頓的問題。
無論是用setInterval,還是requestAnimationFrame,在單頁面項目中,切換頁面后還是會在繼續執行的所以得需要在頁面切換的時候清除掉。
Vue項目中示例: