执行'realtime'javascript而不挂浏览器

Question

我想在Javascript中编写简单的音乐测序器。

声音将SoundManager2

我很快意识到，setTimeout和setInterval的是无用的这种定时播放。他们的准确性不够好。

那么我想的却是这样的：

创建的声音事件队列（二维数组[注，时间]）

过程中while循环

队列

在伪代码可能是这样的：

// The queue of time/note values (millisecs) 
var q = [[0, C], [250, D], [500, E]] 

var begin = (new Date).getTime() 

while(q.length > 0){ 
    var now = (new Date).getTime() 
    var eventTime = q[0][0] + begin 

    if(now >= eventTime){ 

     playNote(q[0][1]) // Play the note 
     q.shift()  // Now that the note has been played, discard it. 
    } 
} 

通过德窃听我发现这种方法似乎足够精确（playNote调用是在它应该的确切时间进行的）。

但是，当播放'序列'时，所有其他Javascript（包括实际发出声音的位）都被暂停，这并不令人意外。

这意味着我会沉默很长时间才能运行序列，然后执行所有的playNote调用。

我试着在它自己的函数中隔离while循环，然后通过setTimeout调用它，希望这会创建一个后台线程执行它自己的东西（即播放序列）而不会停止所有其他JS执行。这是行不通的

我也尝试过使用setTimeout调用playNote函数，希望尽管UI被冻结，至少序列播放正确，但这也不起作用。

我也试过了一个组合，但是正如你可能已经猜到的那样，那也行不通。

所以我的问题是：

我怎么能有精确定时处理事件的队列中，同时运行

Answer 1

过程中未关闭所有其他代码执行，我不知道是否有针对较旧浏览器的解决方案，但web workers适合在JavaScript中执行平行执行。

在最近的Chrome和Firefox版本中，我不支持其他浏览器。

Answer 2

如果用递归函数替换while循环（它不必自动执行），浏览器将不会冻结。

(function foo (q) { 
    var now = (new Date).getTime(), 
     eventTime = q[0][0] + begin; 
    if (q.length > 0) { 
     if (now >= eventTime) { 
      playNote(q[0][1]); // Play the note 
      q.shift(); // Discard played note 
     } 
     return foo(q); // Pass q into the next round 
    } else { 
     return; // End the "loop" 
    } 
}(q)); 

编辑：与递归调用+计时精度的问题应该被照顾的setInterval：

var timer = setInterval(function foo() { 
    var now = (new Date).getTime(), 
     eventTime = q[0][0] + begin; 
    if (q.length > 0) { 
     if (now >= eventTime) { 
      playNote(q[0][1]); // Play the note 
      q.shift(); // Discard played note 
     } 
    } else { 
     clearInterval(timer); // End the "loop" 
    } 
}, 10); // This is in ms (10 is just a random number)