Come fare in modo che `setInterval` si comporti in modo più sincronizzato, o come usare invece` setTimeout`?

Sto lavorando a un programma musicale che richiede che più elementi JavaScript siano sincronizzati con un altro. Sto usando setInterval, che inizialmente funziona molto bene. Tuttavia, nel tempo gli elementi perdono gradualmente la sincronizzazione, il che è negativo in un programma musicale.

Ho letto online che setTimeoutè più accurato e puoi avere dei setTimeoutloop in qualche modo. Tuttavia, non ho trovato una versione generica che illustri come ciò sia possibile.

Fondamentalmente ho alcune funzioni come queste:

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

Funziona molto bene, inizialmente, ma nel corso di circa un minuto, i suoni diventano notevolmente fuori sincrono come ho letto setInterval. Ho letto che setTimeoutpuò essere sempre più accurato.

Qualcuno potrebbe mostrarmi un semplice esempio di utilizzo setTimeoutper ripetere qualcosa indefinitamente? In alternativa, se esiste un modo per ottenere risultati più sincroni con setIntervalo anche un'altra funzione, fammelo sapere.

Puoi creare un setTimeoutciclo usando la ricorsione:

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

Il problema con setInterval()e setTimeout()è che non vi è alcuna garanzia che il codice verrà eseguito nel tempo specificato. Usandolo setTimeout()e chiamandolo in modo ricorsivo, ti assicuri che tutte le operazioni precedenti all'interno del timeout siano complete prima che inizi l'iterazione successiva del codice.

Solo per completare. Se devi passare una variabile e iterarla, puoi fare proprio così:

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

Produzione:

1
2
3
...
9
10

Una riga al secondo.

Dato che nessuno dei due tempi sarà molto preciso, un modo da utilizzare setTimeoutper essere un po 'più accurati è calcolare quanto tempo è stato il ritardo dall'ultima iterazione e quindi regolare l'iterazione successiva come appropriato. Per esempio:

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

Quindi la prima volta aspetterà (almeno) 1000 ms, quando il tuo codice viene eseguito, potrebbe essere un po 'in ritardo, diciamo 1046 ms, quindi sottraiamo 46 ms dal nostro ritardo per il ciclo successivo e il ritardo successivo sarà solo 954 ms. Ciò non impedirà al timer di attivarsi in ritardo (è prevedibile), ma ti aiuterà a evitare che i ritardi si accumulino. (Nota: potresti voler verificare il motivo per thisDelay < 0cui il ritardo era più del doppio del tuo ritardo target e hai perso un ciclo - dipende da te come vuoi gestire quel caso).

Ovviamente, questo probabilmente non ti aiuterà a mantenere sincronizzati diversi timer, nel qual caso potresti voler capire come controllarli tutti con lo stesso timer.

Quindi, guardando il tuo codice, tutti i tuoi ritardi sono multipli di 500, quindi potresti fare qualcosa del genere:

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

Il modo migliore per gestire la temporizzazione dell'audio è con Web Audio Api, ha un clock separato che è accurato indipendentemente da ciò che sta accadendo nel thread principale. C'è una grande spiegazione, esempi, ecc da Chris Wilson qui:

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

Dai un'occhiata a questo sito per ulteriori API Web Audio, è stato sviluppato per fare esattamente quello che stai cercando.

Uso setInterval()

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

Quanto sopra verrà eseguito alert("Hello");ogni 3 secondi.

Secondo il vostro requisito

mostrami un semplice esempio di utilizzo di setTimeout per eseguire il loop di qualcosa

abbiamo il seguente esempio che può aiutarti

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

Uso questo modo nella vita lavorativa: "Dimentica i loop comuni" in questo caso e uso questa combinazione di "setInterval" che include "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: Capisci che il comportamento reale di (setTimeOut): inizieranno tutti nello stesso tempo "i tre bla bla bla inizieranno il conto alla rovescia nello stesso momento" quindi fai un timeout diverso per organizzare l'esecuzione.

PS 2: l'esempio per il loop di temporizzazione, ma per un loop di reazione puoi utilizzare eventi, prometti asincroni attesi

problema di ciclo setTimeout con soluzione

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

Come qualcun altro ha sottolineato, l'API Web Audio ha un timer migliore.

Ma in generale, se questi eventi si verificano in modo coerente, che ne dici di metterli tutti sullo stesso timer? Sto pensando a come funziona uno step sequencer .

In pratica, potrebbe sembrare qualcosa di simile?

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

Penso che sia meglio il timeout alla fine della funzione.

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

Queste tre funzioni sono necessarie perché le variabili nella seconda funzione verranno sovrascritte ogni volta con il valore predefinito. Quando il puntatore del programma raggiunge il setTimeout, un passo è già calcolato. Quindi solo lo schermo ha bisogno di un po 'di tempo.

Usa let invece di var nel codice:

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