`SetInterval`in daha fazla senkronize davranması nasıl sağlanır veya bunun yerine` setTimeout` nasıl kullanılır?

Birden çok JavaScript öğesinin bir başkasıyla senkronize olmasını gerektiren bir müzik programı üzerinde çalışıyorum. setIntervalBaşlangıçta gerçekten iyi çalışan kullanıyorum . Bununla birlikte, zamanla öğeler kademeli olarak uyumsuz hale gelir ve bu da bir müzik programında kötüdür.

setTimeoutDaha doğru olanı çevrimiçi okudum ve bir setTimeoutşekilde döngülere sahip olabilirsiniz . Ancak bunun nasıl mümkün olduğunu gösteren genel bir versiyon bulamadım.

Temelde aşağıdaki gibi bazı işlevlerim var:

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

Başlangıçta çok iyi çalışıyor, ancak yaklaşık bir dakika içinde, okuduğum gibi sesler gözle görülür şekilde senkronize olmuyor setInterval. Bunun setTimeoutdaha tutarlı bir şekilde doğru olabileceğini okudum .

Birisi bana bir setTimeoutşeyi süresiz olarak döngüye sokmanın temel bir örneğini gösterebilir mi? Alternatif olarak, setIntervalveya başka bir işlevle daha eşzamanlı sonuçlar elde etmenin bir yolu varsa , lütfen bana bildirin.

setTimeoutÖzyinelemeyi kullanarak bir döngü oluşturabilirsiniz :

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

İle ilgili sorun setInterval()ve setTimeout()kodunuzun belirtilen zamanda çalışacağına dair hiçbir garanti olmamasıdır. Bunu setTimeout()yinelemeli olarak kullanarak ve çağırarak, zaman aşımı içindeki tüm önceki işlemlerin kodun bir sonraki yinelemesi başlamadan önce tamamlanmasını sağlarsınız.

Sadece takviye için. Bir değişkeni geçmeniz ve onu yinelemeniz gerekiyorsa, aynen bunu yapabilirsiniz:

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

Çıktı:

1
2
3
...
9
10

Saniyede bir satır.

Her iki zamanın da çok doğru setTimeoutolmayacağı düşünüldüğünde, biraz daha doğru olmanın bir yolu , son yinelemeden bu yana gecikmenin ne kadar olduğunu hesaplamak ve ardından bir sonraki yinelemeyi uygun şekilde ayarlamaktır. Örneğin:

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

Yani ilk kez 1000 ms bekleyecek, kodunuz yürütüldüğünde biraz geç olabilir, mesela 1046 ms, bu yüzden bir sonraki döngü için gecikmemizden 46 ms çıkarıyoruz ve bir sonraki gecikme sadece 954 ms. Bu, zamanlayıcının geç ateşlemesini durdurmaz (bu beklenen bir durumdur), ancak topaklanmadan kaynaklanan gecikmeleri durdurmanıza yardımcı olur. (Not: thisDelay < 0Bu, gecikmenin hedef gecikmenizin iki katından fazla olduğu ve bir döngüyü kaçırdığınız anlamına geldiğini kontrol etmek isteyebilirsiniz - bu durumu nasıl ele almak istediğinize bağlı olarak).

Tabii ki, bu muhtemelen birkaç zamanlayıcıyı senkronize tutmanıza yardımcı olmayacaktır, bu durumda hepsini aynı zamanlayıcıyla nasıl kontrol edeceğinizi bulmak isteyebilirsiniz.

Kodunuza baktığınızda, tüm gecikmeleriniz 500'ün katıdır, bu nedenle şöyle bir şey yapabilirsiniz:

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

Ses zamanlamasıyla başa çıkmanın en iyi yolu, Web Audio Api'dir, ana iş parçacığında ne olduğuna bakılmaksızın doğru olan ayrı bir saate sahiptir. Burada Chris Wilson'dan harika bir açıklama, örnekler vb. Var:

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

Daha fazla Web Audio API için bu siteye bir göz atın, tam olarak sizin peşinde olduğunuz şeyi yapmak için geliştirilmiştir.

Kullanım setInterval()

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

Yukarıdakiler alert("Hello");her 3 saniyede bir yürütülecektir .

İhtiyacınıza göre

sadece bir şeyi döngülemek için setTimeout kullanmanın temel bir örneğini göster

size yardımcı olabilecek aşağıdaki örneğimiz var

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

Çalışma hayatımda şu şekilde kullanıyorum: Bu durumda "Ortak döngüleri unut" ve "setInterval" kombinasyonunu kullanıyorum "setTimeOut" lar:

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

Not: (setTimeOut) 'un gerçek davranışının hepsinin aynı anda başlayacağını anlayın "üç bla bla bla aynı anda geri saymaya başlayacak", bu nedenle yürütmeyi düzenlemek için farklı bir zaman aşımı yapın.

Not 2: zamanlama döngüsü örneği, ancak bir reaksiyon döngüleri için olayları kullanabilirsiniz, asenkron beklemeyi vaat edin ..

çözümü ile setTimeout döngü sorunu

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

Başka birinin işaret ettiği gibi, Web Audio API'nin daha iyi bir zamanlayıcısı vardır.

Ama genel olarak, eğer bu olaylar sürekli gerçekleşirse, hepsini aynı zamanlayıcıya koymaya ne dersiniz? Adım sıralayıcının nasıl çalıştığını düşünüyorum.

Pratik olarak böyle bir şey olabilir mi?

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

Sanırım işlevin sonunda zaman aşımına uğramak daha iyi.

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

Bu üç işlev gereklidir, çünkü ikinci işlevdeki değişkenler her seferinde varsayılan değer ile değiştirilecektir. Program göstergesi setTimeout'a ulaştığında bir adım zaten hesaplanır. O zaman sadece ekranın biraz zamana ihtiyacı var.

Kodda var yerine let'i kullanın:

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