Javascript、setTimeoutループ？

そのため、複数のJavaScript要素を別の要素と同期させる必要がある音楽プログラムに取り組んでいます。私は最初は本当にうまく機能するsetIntervalを使用してきましたが、時間の経過とともに要素が徐々に同期しなくなり、音楽プログラムとの同期が悪くなります。

私はsetTimeoutがより正確であることをオンラインで読みました、そしてあなたはどういうわけかsetTimeoutループを持つことができます、しかし私はこれがどのように可能であるかを説明する一般的なバージョンを見つけませんでした。誰かがsetTimeoutを使用して何かを無期限にループする基本的な例を見せてくれませんか。

ありがとうございました。または、setIntervalまたは別の関数を使用してより同期した結果を実現する方法がある場合は、お知らせください。

編集：

基本的に私はそのようないくつかの機能を持っています：

//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);

最初は非常にうまく機能しますが、約1分のうちに、setIntervalで発生することを読んだため、サウンドの同期が著しくずれます。setTimeoutの方が一貫して正確である可能性があることを読みました。

setTimeout再帰を使用してループを作成できます。

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

の問題 setInterval()とは、setTimeout()あなたのコードは、指定した時間に実行されます保証がないということです。これをsetTimeout()再帰的に使用して呼び出すことにより、コードの次の反復が始まる前に、タイムアウト内の以前のすべての操作が確実に完了するようになります。

補足するだけです。変数を渡してそれを繰り返す必要がある場合は、次のようにすることができます。

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

出力：

1
2
3
...
9
10

1秒あたり1行。

どちらの時間が非常に正確setTimeoutになることはないので、もう少し正確にするために使用する1つの方法は、最後の反復からの遅延の長さを計算し、必要に応じて次の反復を調整することです。例えば：

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遅延が目標遅延の2倍以上であり、サイクルを逃したことを意味するかどうかを確認することをお勧めします-その場合の処理​​方法はあなた次第です）。

もちろん、これはおそらく複数のタイマーの同期を維持するのに役立ちません。その場合、同じタイマーでそれらすべてを制御する方法を理解する必要があるかもしれません。

したがって、コードを見ると、すべての遅延は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);
}

オーディオタイミングを処理する最良の方法は、Web Audio Apiを使用することです。これには、メインスレッドで何が起こっているかに関係なく正確な別個のクロックがあります。ここにクリスウィルソンからの素晴らしい説明、例などがあります：

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

より多くのWebAudio APIについては、このサイトをご覧ください。これは、まさにあなたが求めていることを実行するために開発されました。

使用する setInterval()

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

上記はalert("Hello");3秒ごとに実行されます。

あなたの要件に応じて

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)
})

私は仕事でこのように使用します。この場合、「一般的なループを忘れる」と、「setInterval」のこの組み合わせを使用します。

    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）の実際の動作を理解してください：それらはすべて同時に開始されます「3つのbla bla blaは同じ瞬間にカウントダウンを開始します」ので、実行を調整するために異なるタイムアウトを作成します。

PS 2：タイミングループの例ですが、リアクションループの場合はイベントを使用でき、asyncawaitを約束します。

解決策と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);
} 

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);
}

他の誰かが指摘したように、Web AudioAPIにはより優れたタイマーがあります。

しかし、一般的に、これらのイベントが一貫して発生する場合は、それらすべてを同じタイマーに設定するのはどうですか？ステップシーケンサーのしくみを考えています。

実際には、このように見えるでしょうか？

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

関数の最後でタイムアウトする方が良いと思います。

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);
}   

2番目の関数の変数は毎回デフォルト値で上書きされるため、この3つの関数が必要です。プログラムポインタがsetTimeoutに達すると、1ステップがすでに計算されています。次に、画面だけに少し時間がかかります。

コードでvarの代わりにletを使用します：

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