<center id="qkqgy"><optgroup id="qkqgy"></optgroup></center>
  • <menu id="qkqgy"></menu>
    <nav id="qkqgy"></nav>
    <xmp id="qkqgy"><nav id="qkqgy"></nav>
  • <xmp id="qkqgy"><menu id="qkqgy"></menu>
    <menu id="qkqgy"><menu id="qkqgy"></menu></menu>
    <tt id="qkqgy"><tt id="qkqgy"></tt></tt>

  • 為什么會出現定時器不準確呢?

    ????????這個其實就得提到js執行機制了,叫做事件循環Eventloop 循環機制中,異步事件 setInterval
    到時后會把回調函數放入消息隊列中Event
    Queue,主線程的宏任務執行完畢后依次執行消息隊列的微任務,等微任務執行完了在循環回來執行宏任務。并且由于消息隊列中存在大量任務,其他任務執行時間就會造成定時器回調函數的延遲,如果不處理則會一直疊加延遲。

    以下是ChatGPT給出的的一些解決JS定時器不準確問題的方法:

    *

    使用精度更高的定時器:使用requestAnimationFrame()代替setInterval或setTimeout,因為它以常規更新率刷新屏幕,并保證在用戶可見的時間內繪制動畫。requestAnimationFrame()是基于瀏覽器屏幕的重繪機制觸發的,可以有效避免誤差的累積。

    *
    縮短定時間隔時間:如果一個定時器在瀏覽器里表現得很不準確,可能需要縮小時間間隔,比如說從100毫秒改成10毫秒。

    *
    使用標準時間:
    可以使用標準時間對象提供的函數(如getTime、getSeconds等)獲取當前時間,而不是使用JavaScript自帶的全局變量Date來保證計時器的準確性。

    *
    避免多個計時器同時存在:如果多個計時器同時存在,可能會導致其他定時器的執行被延遲或丟失調用。只使用唯一一個計時器進行安排和管理。

    ????????總之,實際場景中,可結合具體應用場景選擇相符的解決方案。

    ????????我們開發過程中也可以通過計算時差可以有效的解決。

    ? ? ? ? 接下來是我自己整理的方法

    ?通過動態計算時差解決setInterval定時器不準確的問題

    ????????根據定時器最開始時間計算當前時間(回調函數執行時間)與開始時間的誤差,用期望時差減誤差作為下一次任務的時間間隔

    *
    在開始執行計時器之前,記錄本地時間。

    *
    在計時器函數中,獲取當前本地時間,并計算與記錄的本地時間之間的時差(單位為毫秒)。

    *
    在計算得到的時差的基礎上,添加上期望的時間間隔,便是下一次計時器應該觸發的時間。

    *
    在定時器回調函數中,采用setTimeout代替setInterval,并傳入計算得到的時間差作為等待時間。
    let localTime = new Date().getTime(); //記錄本地時間 function timer() { const now =
    new Date().getTime(); // 獲取當前本地時間 const timeGap = now - localTime; // 計算時間差 //
    下一次計時器應該觸發的時間 const nextTickTime = 1000 - (timeGap % 1000); setTimeout(() => {
    // 在此處執行計時器的操作 console.log('tick'); timer(); // 遞歸調用,實現循環 }, nextTickTime); }
    timer(); // 啟動計時器
    ? ? ??這種方法能夠避免JavaScript在處理大量任務時的卡頓和延遲,保證定時器的調用的準確性。

    使用 web Worker解決setInterval定時器不準確的問題

    ? ? ? ? ?原理:將定時函數作為獨立線程執行

    ????????Web Worker 是運行在后臺線程中的 JavaScript 腳本,可以與主線程并行工作,因此不會受主線程的影響。我們可以使用 Web
    Worker 來創建一個新的線程來處理定時器。

    以下是一個簡單的示例:
    //在 main.js 中創建 Worker const worker = new Worker("worker.js"); //在 worker.js
    中處理定時器 let intervalId = null; worker.onmessage = function(event) {
    console.log("Received message from main script"); if (event.data === "start") {
    intervalId = setInterval(function() { console.log("Worker: Interval fired");
    postMessage("tick"); }, 1000); } else if (event.data === "stop") {
    clearInterval(intervalId); intervalId = null; } };
    ????????在主線程中,我們首先創建一個新的 Web Worker worker.js,然后通過調用 onmessage 方法來監聽來自 Worker
    的消息。當收到start 消息時,我們在 Worker 中啟動一個定時器。當收到 stop 消息時,我們清除定時器。

    以下是 worker.js 文件的內容:
    //worker.js onmessage = function(event) { console.log("Received message from
    main script"); if (event.data === "start") { console.log("Worker: Starting
    interval"); intervalId = setInterval(function() { console.log("Worker: Interval
    fired"); postMessage("tick"); }, 1000); } else if (event.data === "stop") {
    console.log("Worker: Stopping interval"); clearInterval(intervalId); intervalId
    = null; } };
    ????????在 Worker 中,我們定義了一個 onmessage 方法來監聽來自主線程的消息。當收到 start 消息時,我們在 Worker
    中啟動一個定時器;當收到stop 消息時,我們清除定時器。通過調用 postMessage 方法來將消息發送回主線程。

    ????????現在,可以通過向 Worker 發送 start 和 stop 消息來控制定時器的啟動和停止。由于該定時器是在 Worker
    線程中運行的,因此它不會受到主線程的影響,從而保證了定時器的準確性。

    技術
    下載桌面版
    GitHub
    百度網盤(提取碼:draw)
    Gitee
    云服務器優惠
    阿里云優惠券
    騰訊云優惠券
    華為云優惠券
    站點信息
    問題反饋
    郵箱:ixiaoyang8@qq.com
    QQ群:766591547
    關注微信
    巨胸美乳无码人妻视频