如何使 `setInterval` 表现得更加同步，或者如何使用 `setTimeout` 代替？

Question

我正在开发一个需要多个 JavaScript 元素与另一个元素同步的音乐程序。 我一直在使用setInterval ，最初效果很好。 然而，随着时间的推移，这些元素逐渐变得不同步，这在音乐节目中是不好的。

我在网上读到setTimeout更准确，你可以以某种方式设置setTimeout循环。 但是，我还没有找到一个通用版本来说明这是如何实现的。

基本上我有一些这样的功能：

//drums
setInterval(function {
  //code for the drums playing goes here
}, 8000);

//chords
setInterval(function {
  //code for the chords playing goes here
}, 1000);

//bass
setInterval(function {
  //code for the bass playing goes here
}, 500);

它最初工作得非常好，但在大约一分钟的过程中，声音变得明显不同步，因为我读过setInterval发生的情况。 我读过setTimeout可以更加准确。

有人可以给我看一个使用setTimeout无限循环的基本示例吗？ 或者，如果有办法使用setInterval甚至其他函数实现更多同步结果，请告诉我。

Answer 1

您可以使用递归创建一个setTimeout循环：

function timeout() {
    setTimeout(function () {
        // Do Something Here
        // Then recall the parent function to
        // create a recursive loop.
        timeout();
    }, 1000);
}

setInterval()和setTimeout()的问题在于不能保证您的代码将在指定的时间内运行。 通过使用setTimeout()并递归调用它，您可以确保在下一次代码迭代开始之前超时内的所有先前操作都已完成。

Answer 2

只能补充。 如果您需要传递一个变量并对其进行迭代，您可以这样做：

function start(counter){
  if(counter < 10){
    setTimeout(function(){
      counter++;
      console.log(counter);
      start(counter);
    }, 1000);
  }
}
start(0);

输出：

1
2
3
...
9
10

每秒一条线。

Answer 3

鉴于这两个时间都不会非常准确，使用setTimeout更准确的一种方法是计算自上次迭代以来的延迟时间，然后根据需要调整下一次迭代。 例如：

var myDelay = 1000;
var thisDelay = 1000;
var start = Date.now();

function startTimer() {    
    setTimeout(function() {
        // your code here...
        // calculate the actual number of ms since last time
        var actual = Date.now() - start;
        // subtract any extra ms from the delay for the next cycle
        thisDelay = myDelay - (actual - myDelay);
        start = Date.now();
        // start the timer again
        startTimer();
    }, thisDelay);
}

所以第一次它会（至少）等待 1000 毫秒，当你的代码被执行时，它可能会有点晚，比如 1046 毫秒，所以我们从下一个周期的延迟中减去 46 毫秒，下一个延迟将是只有 954 毫秒。 这不会阻止计时器延迟触发（这是意料之中的），但可以帮助您阻止延迟堆积。 （注意：您可能需要检查thisDelay < 0这意味着延迟是您的目标延迟的两倍多，并且您错过了一个周期 - 由您决定如何处理这种情况）。

当然，这可能无法帮助您保持多个计时器同步，在这种情况下，您可能想弄清楚如何使用同一个计时器来控制它们。

所以看看你的代码，你所有的延迟都是 500 的倍数，所以你可以这样做：

var myDelay = 500;
var thisDelay = 500;
var start = Date.now();
var beatCount = 0;

function startTimer() {    
    setTimeout(function() {
        beatCount++;
        // your code here...
        //code for the bass playing goes here  

        if (count%2 === 0) {
            //code for the chords playing goes here (every 1000 ms)
        }

        if (count%16) {
            //code for the drums playing goes here (every 8000 ms)
        }

        // calculate the actual number of ms since last time
        var actual = Date.now() - start;
        // subtract any extra ms from the delay for the next cycle
        thisDelay = myDelay - (actual - myDelay);
        start = Date.now();
        // start the timer again
        startTimer();
    }, thisDelay);
}

Answer 4

处理音频计时的最佳方法是使用 Web Audio Api，它有一个独立的时钟，无论主线程中发生什么，它都是准确的。 Chris Wilson 在这里提供了很好的解释、示例等：

http://www.html5rocks.com/en/tutorials/audio/scheduling/

浏览此站点以了解更多 Web Audio API，它的开发正是为了满足您的需求。

Answer 5

使用setInterval()

setInterval(function(){
 alert("Hello"); 
}, 3000);

上面的代码会执行alert("Hello"); 每 3 秒。

Answer 6

根据您的要求

只是给我看一个使用 setTimeout 循环的基本例子

我们有以下示例可以帮助您

 var itr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var interval = 1000; //one second itr.forEach((itr, index) => { setTimeout(() => { console.log(itr) }, index * interval) })

Answer 7

我在工作生活中使用这种方式：在这种情况下“忘记常见循环”并使用“setInterval”的这种组合包括“setTimeOut”：

    function iAsk(lvl){
        var i=0;
        var intr =setInterval(function(){ // start the loop 
            i++; // increment it
            if(i>lvl){ // check if the end round reached.
                clearInterval(intr);
                return;
            }
            setTimeout(function(){
                $(".imag").prop("src",pPng); // do first bla bla bla after 50 millisecond
            },50);
            setTimeout(function(){
                 // do another bla bla bla after 100 millisecond.
                seq[i-1]=(Math.ceil(Math.random()*4)).toString();
                $("#hh").after('<br>'+i + ' : rand= '+(Math.ceil(Math.random()*4)).toString()+' > '+seq[i-1]);
                $("#d"+seq[i-1]).prop("src",pGif);
                var d =document.getElementById('aud');
                d.play();                   
            },100);
            setTimeout(function(){
                // keep adding bla bla bla till you done :)
                $("#d"+seq[i-1]).prop("src",pPng);
            },900);
        },1000); // loop waiting time must be >= 900 (biggest timeOut for inside actions)
    }

PS：了解（setTimeOut）的真实行为：它们都将在同一时间开始“三个bla bla bla将在同一时刻开始倒计时”，因此请设置不同的超时时间来安排执行。

PS 2：计时循环的示例，但是对于反应循环，您可以使用事件，promise async await ..

Answer 8

setTimeout循环问题的解决方法

 // it will print 5 times 5. for(var i=0;i<5;i++){ setTimeout(()=> console.log(i), 2000) } // 5 5 5 5 5 // improved using let for(let i=0;i<5;i++){ setTimeout(()=> console.log('improved using let: '+i), 2000) } // improved using closure for(var i=0;i<5;i++){ ((x)=>{ setTimeout(()=> console.log('improved using closure: '+x), 2000) })(i); }

Answer 9

正如其他人指出的那样，Web Audio API 有一个更好的计时器。

但总的来说，如果这些事件始终如一地发生，那么您如何将它们全部放在同一个计时器上呢？ 我正在考虑步进音序器的工作原理。

实际上，它看起来像这样吗？

var timer = 0;
var limit = 8000; // 8000 will be the point at which the loop repeats

var drumInterval = 8000;
var chordInterval = 1000;
var bassInterval = 500;

setInterval(function {
    timer += 500;

    if (timer == drumInterval) {
        // Do drum stuff
    }

    if (timer == chordInterval) {
        // Do chord stuff
    }

    if (timer == bassInterval) {
        // Do bass stuff
    }

    // Reset timer once it reaches limit
    if (timer == limit) {
        timer = 0;
    }

}, 500); // Set the timer to the smallest common denominator

Answer 10

function appendTaskOnStack(task, ms, loop) {
    window.nextTaskAfter = (window.nextTaskAfter || 0) + ms;

    if (!loop) {
        setTimeout(function() {
            appendTaskOnStack(task, ms, true);
        }, window.nextTaskAfter);
    } 
    else {
        if (task) 
            task.apply(Array(arguments).slice(3,));
        window.nextTaskAfter = 0;
    }
}

for (var n=0; n < 10; n++) {
    appendTaskOnStack(function(){
        console.log(n)
    }, 100);
}

Answer 11

function timerCycle() {
  if (stoptime == false) {
    sec = parseInt(sec);
    min = parseInt(min);
    hr = parseInt(hr);
    sec = sec + 1;
    if (sec == 60) {
      min = min + 1;
      sec = 0;
    }

    if (min == 60) {
      hr = hr + 1;
      min = 0;
      sec = 0;
    }

    if (sec < 10 || sec == 0) {
      sec = "0" + sec;
    }
    if (min < 10 || min == 0) {
      min = "0" + min;
    }
    if (hr < 10 || hr == 0) {
      hr = "0" + hr;
    }

    timer.innerHTML = hr + " : " + min + " : " + sec;

    setTimeout(timerCycle, 1000);
  }
}

function startTimer() {
  if (stoptime == true) {
    stoptime = false;
    timerCycle();
  }
}

function stopTimer() {
  if (stoptime == false) {
    stoptime = true;
  }
}
function resetTimer() {
  hr = 0;
  min = 0;
  sec = 0;
  stopTimer();
  timer.innerHTML = "00:00:00";
}

Answer 12

在代码中使用 let 而不是 var ：

for(let i=1;i<=5;i++){setTimeout(()=>{console.log(i)},1000);}

Answer 13

我认为最好在函数结束时超时。

function main(){
    var something; 
    make=function(walkNr){
         if(walkNr===0){
           // var something for this step      
           // do something
         }
         else if(walkNr===1){
           // var something for that step 
           // do something different
         }

         // ***
         // finally
         else if(walkNr===10){
           return something;
         }
         // show progress if you like
         setTimeout(funkion(){make(walkNr)},15,walkNr++);  
   }
return make(0);
}   

这三个函数是必要的，因为第二个函数中的 vars 每次都会被默认值覆盖。 当程序指针到达 setTimeout 时，已经计算了一步。 然后只是屏幕需要一点时间。