减少 HTML5/Javascript 应用程序中的抖动答案

【问题标题】：Reducing Jitter in HTML5/Javascript App减少 HTML5/Javascript 应用程序中的抖动
【发布时间】：2013-06-02 19:48:37
【问题描述】：

我正在构建一个 JavaScript/HTML5 中的节拍器（最终应该是一个 FirefoxOS 应用程序）。我遇到的问题是抖动，这对节拍器来说是不行的。我知道 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 得到相同的结果）？也许一些用于更精确计时器的本机浏览器代码？

谢谢，

约翰内斯

【问题讨论】：

嗨，还有其他人正在寻找 FirefoxOS 的精确时序要求吗？我还没有机会在原生 FirefoxOS 手机上尝试这个，但我想 setInterval 和朋友的准确性会有限制。有人知道firefoxOS下的节拍器应用吗？

标签： javascript html timing

【解决方案1】：

由于 JS 在 UI 线程上运行并与所有其他活动共享，因此您绝对无法使用超时和间隔等简单工具来消除抖动。问题是这些只会让你定期排入队列，而且总是排在后面。

相反，您应该查看 Web Workers，它提供了一种将长时间运行的任务（如节拍器）推离主线程的机制。

这里有一些很好的信息：

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

【讨论】：

【解决方案2】：

你可以试试这样的：

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

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

当您想启动它时，请执行以下操作：

// Start
var metronome = start(100);

// Stop
stop(metronome);

如果没有阻塞 UI 线程，setInterval 应该会给你很好的结果。

【讨论】：