requestAnimationFrame並知道瀏覽器何時重新繪製？

有沒有辦法知道瀏覽器何時正在運行？requestAnimationFrame並知道瀏覽器何時重新繪製？

例如，當我從運行的選項卡切換標籤時，該函數停止執行，當我將其切換回來時，處理此問題的最佳方法是什麼？

2013-06-20 GriffLab

，你可以設置爲您的RAF回調之日起一個變量，該時間戳比較當前一個知道它是如何長久以來一直因爲塗料。任何超過一秒，標籤很可能模糊。 – dandavis

要檢測運行100％，您可以檢查：

window.addEventListener('blur', function() { 
    //not running full 
}, false);

和

window.addEventListener('focus', function() { 
    //running optimal (if used) 
}, false);

這可以使用，因爲我們知道降低觸發率（在大多數瀏覽器）當窗口（選項卡）不是活動的（IF被使用 - 它取決於實際使用的代碼）。

如果你希望它運行不斷，你可以插入一個機制，比如這個：

var isActiveTab = true; //update with the events above 

function myLoop() { 

    //my cool stuff here 

    if (isActiveTab) { 
     requestAnimationFrame(myLoop); 
    } else { 
     setTimeout(myLoop, 16); //force a rate (vblank sync not necessary 
           //when display isn't updated 
    } 
}

注意，在利率的降低對requestAnimationFrame是不是標準的一部分，是一個瀏覽器的具體實施。

來源

2013-06-20 22:05:19 K3N

感謝您的肯，另一個答案沒有完全理解我的問題，但這很好。你認爲他們會在這方面有所作爲，因爲所有遊戲的核心都是可變時間步，你使用來自循環的某種定時機制，所以切換標籤有很大的暫停有點讓它失望。我的另一個想法是記錄英國皇家空軍的FPS，如果三角洲超出平均時間步長，那麼使用記錄的FPS時間步長作爲德爾塔值，不知道我將如何實施它。 – GriffLab

@GriffLab對於FPS也許這可能有所幫助：http://stackoverflow.com/questions/5078913/html5-canvas-performance-calculating-loops-frames-per-second – K3N

我不確定窗口焦點/模糊事件將足以知道瀏覽器標籤所處的「模式」 - 如果操作系統一段時間沒有收到任何輸入並進入閒置/節能模式，我認爲這會影響RAF的內容。我在通過RAF運行循環時鐘應用程序時注意到了這一點。 – MachineElf

當你再回來與動畫的標籤，它必須工作正常（如果那是如此 - 下面是你的答案！）

這是RAF做出for.To優化性能。 SetInterval和Settimeout可以用來創建動畫，但它們不能與瀏覽器交互，並最終導致cpu佔用，性能也很慢。

但是你的問題實際上並不是一個問題。這實際上是英國皇家空軍用來改善你整體動畫體驗的技巧。

有幾篇文章解釋了RAF。 http://creativejs.com/resources/requestanimationframe/

只是一個優化絕招 - 無需擔心

來源

2013-06-20 16:42:57

完美答案!!! – 2013-06-20 16:44:06

但是，如果我使用requestAnimationFrame創建一個循環，並且傳遞增量時間來更新屏幕上的實體，並且某人從標籤中瀏覽，那麼我的增量時間會變得混亂，導致實體違反其邊界，知道請求動畫是否運行與否會解決這個問題，你會怎麼做呢？ – GriffLab

你能拿出你的代碼！一些小提琴會很棒。 – 2013-06-20 16:51:41

我在畫布重新粉刷項目中使用的解決方案。這不是100％準確，但它適用於聚焦用戶

// This will run when user is inactive 
let = handleVisibilityChange =() => { 
    if (document.hidden) { 
     setTimeout(() => { 
      updateYourStuff(); 
      handleVisibilityChange(); 
     }, 1000); 
    } 
}; 

// Listen if user is active or inactive 
document.addEventListener("visibilitychange", handleVisibilityChange, false); 

// Your loop when user is active 
function myLoop() { 
    updateYourStuff(); 
    requestAnimationFrame(myLoop); 
}

來源

2017-08-05 22:58:08 roYal

requestAnimationFrame並知道瀏覽器何時重新繪製？

回答

相關問題