在JavaScript中，我們經常使用requestAnimationFrame、setTimeout、setInterval和setImmediate來控制代碼的執行時機，它們各有特點和適用場景：
1. requestAnimationFrame： requestAnimationFrame主要用于瀏覽器影片渲染，這個函式允許你在下一次瀏覽器重繪前呼叫一個函式，它提供了一個高精度的時間戳，可以在函式內部使用，由于瀏覽器可以在重繪前執行影片，這可以提高影片效果的性能，
使用：
function animate() { // 影片邏輯 requestAnimationFrame(animate); } requestAnimationFrame(animate);
2. setTimeout： setTimeout用于在指定的時間后執行一次回呼函式，它回傳一個timeoutID，可以用來取消這個計時器，
使用：
const timeoutID = setTimeout(function() { // 任務代碼 }, 2000); // 2秒后執行 // 取消計時器 clearTimeout(timeoutID);
3. setInterval： setInterval用于每隔一定時間間隔重復執行回呼函式，它同樣回傳一個intervalID，可以用來取消這個計時器，
使用：
const intervalID = setInterval(function() { // 任務代碼 }, 1000); // 每隔1秒執行一次 // 取消計時器 clearInterval(intervalID);
4. setImmediate： setImmediate的功能類似于setTimeout，但是它會在當前事件回圈結束后立即執行回呼函式，而不是等待指定的時間，需要注意的是，setImmediate并不是所有瀏覽器都支持，主要用于Node.js環境，
使用（Node.js環境）：
const immediateID = setImmediate(function() { // 任務代碼 }); // 取消立即執行 clearImmediate(immediateID);
這四個方法的執行時機有所不同：
1. requestAnimationFrame：
requestAnimationFrame 的執行時機是在瀏覽器準備好繪制下一幀螢屏時，也就是在瀏覽器每次重繪頁面之前，這樣可以讓影片更加流暢，并且避免不必要的計算，當頁面處于隱藏狀態時，requestAnimationFrame 不會運行，這樣可以減少資源的浪費，
2. setTimeout：
setTimeout 的執行時機是在指定的延遲時間之后，只會執行一次，具體執行時間可能會因為瀏覽器當前的作業負載而有所偏差，
3. setInterval：
setInterval 的執行時機是在指定的時間間隔之后，每隔指定的時間就會執行一次，直到被清除，
4. setImmediate：
setImmediate 的執行時機是在當前事件回圈迭代結束后立即執行，相當于將回呼函式插入到事件佇列的頭部，
綜上所述，requestAnimationFrame 的執行時機與瀏覽器的重繪時間有關，setTimeout 和 setInterval 的執行時機與指定的時間間隔有關，而 setImmediate 的執行時機則是在當前事件回圈迭代結束后立即執行，
這四個方法之間的區別如下：
1. requestAnimationFrame：
- 用于影片效果的開發，以優化影片的性能，
- 在瀏覽器準備好繪制下一幀螢屏時呼叫傳入的回呼函式，
- 不會在頁面隱藏或最小化時運行，從而減少資源浪費，
- 呼叫頻率與螢屏重繪率同步，可以提供平滑的影片效果，
2. setTimeout：
- 延遲一定時間后呼叫傳入的回呼函式，
- 僅呼叫一次，
- 時間精度不太準確，會受到瀏覽器當前忙碌程度的影響，
- 用于創建簡單的計時器、輪詢和非重要操作，
3. setInterval：
- 在一定時間間隔后呼叫傳入的回呼函式，直到被清除，
- 可以用于創建重復執行的計時器、輪詢和非重要操作，
- 時間精度不太準確，同樣會受到瀏覽器當前忙碌程度的影響，
4. setImmediate：
- 在當前事件回圈迭代結束后立即執行傳入的回呼函式，
- 相當于將回呼函式插入到事件佇列的頭部，
- 用于在一些異步操作完成后立即執行回呼函式，
總體而言，requestAnimationFrame 適用于影片開發，setTimeout 和 setInterval 適用于計時器、輪詢等需要延遲執行的操作，而 setImmediate 則適用于需要立即執行的回呼函式，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/549171.html
標籤：其他
上一篇：前端隨筆