减少在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应用程序中的抖动

回答

相关问题