JavaScript中計時器requestAnimationFrame、setTimeout、setInterval、setImmediate的使用和區別

来源:https://www.cnblogs.com/ronaldo9ph/archive/2023/04/04/17284643.html
-Advertisement-
Play Games

在JavaScript中,我們經常使用requestAnimationFrame、setTimeout、setInterval和setImmediate來控制代碼的執行時機。它們各有特點和適用場景: 1. requestAnimationFrame: requestAnimationFrame主要用 ...


在JavaScript中,我們經常使用requestAnimationFramesetTimeoutsetIntervalsetImmediate來控制代碼的執行時機。它們各有特點和適用場景:

1. requestAnimationFramerequestAnimationFrame主要用於瀏覽器動畫渲染。這個函數允許你在下一次瀏覽器重繪前調用一個函數。它提供了一個高精度的時間戳,可以在函數內部使用。由於瀏覽器可以在重繪前執行動畫,這可以提高動畫效果的性能。

使用:

function animate() {
  // 動畫邏輯
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);


2. setTimeoutsetTimeout用於在指定的時間後執行一次回調函數。它返回一個timeoutID,可以用來取消這個計時器。

使用:

const timeoutID = setTimeout(function() {
  // 任務代碼
}, 2000); // 2秒後執行

// 取消計時器
clearTimeout(timeoutID);


3. setIntervalsetInterval用於每隔一定時間間隔重覆執行回調函數。它同樣返回一個intervalID,可以用來取消這個計時器。

使用:

const intervalID = setInterval(function() {
  // 任務代碼
}, 1000); // 每隔1秒執行一次

// 取消計時器
clearInterval(intervalID);


4. setImmediatesetImmediate的功能類似於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 則適用於需要立即執行的回調函數。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言 考慮到學生和非電腦專業人士,本文整理了幾個國內免翻牆可以免費訪問的 ChatGPT 網址。在撰寫本文之前,我其實收集了很多網址,但經過親測,目前僅有以下幾個網址可用。,如果對 ChatGPT 使用需求量比較大的,建議通過如下鏈接註冊一個,因為真的不知道哪天會失效,這事只能看臉。 ChatGP ...
  • 1、webpack的作用 模塊打包工具,可以將項目打包成相容瀏覽器的格式,或者打包成手機app等。 它做的事情是,分析你的項目結構,找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言(Scss,TypeScript等),並將其轉換和打包為合適的格式供瀏覽器使用 2、node的作用 ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ...
  • // 註意: 基本數據類型不存在深淺拷貝,只是值傳遞,複合數據類型才有深淺拷貝之說 var obj1 = { name: "吳亦凡" }; var obj2 = obj1; obj1.name = "羅志祥"; // 相當於把obj1的指針複製了一份給了obj2,兩個指針指向了堆記憶體中的一塊記憶體地址 ...
  • 本篇僅以HBuilder X為例,其餘開發軟體同樣適用 這裡兩種方法,使用script標簽直接引入本地的vue.js或使用CDN引入。 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 CSS3提供了Animation關鍵幀動畫,我們在工作中比較常用。但在寫CSS動畫的時候,其實Animation能實現兩種動畫模式: 補間動畫 設置關鍵幀的初始狀態,然後在另一個關鍵幀改變這個狀態,比如大小、顏色、位置、透明度等,電腦將自 ...
  • Javascript: 網頁可見區域寬: document.body.clientWidth 網頁可見區域高: document.body.clientHeight 網頁可見區域寬: document.body.offsetWidth (包括邊線的寬) 網頁可見區域高: document.body. ...
  • 前端性能優化——圖片優化 一、圖片優化措施 優化圖片是 Web 前端優化的重要一環,因為圖片是 Web 頁面中最耗費帶寬和載入時間的資源之一。以下是一些通過優化圖片來優化 Web 前端的方法: 壓縮圖片:壓縮圖片可以減少圖片的文件大小,從而減少載入時間。 使用矢量圖形:使用矢量圖形(如 SVG)可以 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...