Як змусити `setInterval` поводитися більше синхронізовано, або як замість цього використовувати` setTimeout`?

Я працюю над музичною програмою, яка вимагає, щоб кілька елементів 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або навіть іншої функції, будь ласка, дайте мені знати.

Ви можете створити 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

Один рядок в секунду.

З огляду на те, що жоден час не буде дуже точним, одним із способів 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);
}

Найкращий спосіб справитись із синхронізацією звуку - це Web Audio Api, він має окремий годинник, який є точним, незалежно від того, що відбувається в основному потоці. Тут є чудове пояснення, приклади тощо від Кріса Вільсона:

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

Подивіться на цьому веб-сайті, щоб дізнатися більше про веб-аудіо 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", включає "setTimeOut" s:

    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): всі вони почнуться одночасно "три бла бла почнуть відлік в ту ж мить", тому зробіть інший тайм-аут, щоб домовитись про виконання.

PS 2: приклад для циклу синхронізації, але для циклу реакції ви можете використовувати події, обіцяйте async await ..

Проблема циклу 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);
} 

Як зазначав хтось інший, 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

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

Я думаю, що краще закінчити час очікування в кінці функції.

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

Ці три функції необхідні, оскільки вари у другій функції будуть кожного разу перезаписуватися зі значенням за замовчуванням. Коли покажчик програми досягає setTimeout, один крок вже обчислюється. Тоді просто екрану потрібно трохи часу.

Використовуйте let замість var у коді:

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