減少在HTML5/Javascript應用程序中的抖動

我正在爲JavaScript/HTML5（最終應該是FirefoxOS應用程序）的節拍器興趣愛好。我遇到的問題是抖動，這對於節拍器來說是不可行的。我知道JavaScript是單線程的，並且不存在關於進程優先級的控制。這是我有：減少在HTML5/Javascript應用程序中的抖動

function tick() { 
    var next_tick_bpm = parseInt(document.getElementById("bpm").value); 
    if (started) { 
      if (next_tick_bpm > 0) { 
        var next_tick_ms = 60000/next_tick_bpm; 
        beep(); 
        setTimeout(tick, next_tick_ms); 
      } else { 
        toggle(); 
      } 
    }

}

還有其它的東西，除了的setTimeout（我也試過的setInterval相同的結果）？也許一些本地瀏覽器代碼更精確的計時器？

感謝，

約翰內斯

來源

2013-06-02 Johannes Thoma

嗨，別人誰可以尋找FirefoxOS精確定時的要求？我沒有機會在本地的FirefoxOS手機上試用，但我想setInterval和朋友的準確性會受到限制。有人知道firefoxOS下的工作節拍器應用程序嗎？ –

由於JS在UI線程上運行並與所有其他活動共享，因此絕對不能使用簡單工具（如超時和間隔）來移除抖動。問題在於，這些僅僅是讓你週期性地進入隊列，並且總是在後面。

相反，你應該看看網絡工作者，它提供了一個機制，用於將長時間運行的任務（如節拍器）推離主線程。

一些很好的信息在這裏：

https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers

來源

2014-12-01 21:38:45 Kim

你可以嘗試這樣的事：

function start(speed) { 
    return setInterval(beep, 60000/speed); 
} 

function stop(iid) { 
    clearInterval(iid); 
}

當你想要啓動它，這樣做：

// Start 
var metronome = start(100); 

// Stop 
stop(metronome);

如果沒有任何東西阻塞UI線程，setInterval應該給你很好的結果。

來源

2013-08-01 07:55:10

我讀過你使用過的setInterval，但沒有發佈實際的代碼。 –

減少在HTML5/Javascript應用程序中的抖動

回答

相關問題