1

我正在为爱好构建 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 得到相同的结果）？也许一些用于更精确计时器的本机浏览器代码？

谢谢，

  • 约翰内斯
4

2 回答 2

1

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

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

这里有一些很好的信息：

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

于 2014-12-01T21:38:45.930 回答
0

你可以尝试这样的事情：

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-01T07:55:10.627 回答