Các vòng lặp Javascript, setTimeout?

Vì vậy, tôi đang làm việc trên một chương trình âm nhạc yêu cầu nhiều phần tử javascript để đồng bộ với một phần tử khác. Tôi đã sử dụng setInterval ban đầu hoạt động thực sự tốt, tuy nhiên theo thời gian, các yếu tố dần trở nên không đồng bộ với một chương trình âm nhạc là không tốt.

Tôi đã đọc trực tuyến rằng setTimeout chính xác hơn và bạn có thể có các vòng lặp setTimeout bằng cách nào đó, tuy nhiên tôi chưa tìm thấy phiên bản chung minh họa cách điều này có thể thực hiện được. Ai đó có thể chỉ cho tôi một ví dụ cơ bản về việc sử dụng setTimeout để lặp lại một cái gì đó vô thời hạn không.

Cảm ơn bạn. Ngoài ra, nếu có cách nào để đạt được kết quả đồng bộ hơn với setInterval hoặc thậm chí là một hàm khác, vui lòng cho tôi biết.

BIÊN TẬP:

Về cơ bản tôi có một số chức năng như sau:

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

Ban đầu nó hoạt động rất tốt nhưng trong khoảng một phút, âm thanh trở nên không đồng bộ đáng kể khi tôi đọc xảy ra với setInterval, tôi đã đọc rằng setTimeout có thể chính xác hơn.

Bạn có thể tạo một setTimeoutvòng lặp bằng cách sử dụng đệ quy:

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

Vấn đề với setInterval()và setTimeout()là không có gì đảm bảo mã của bạn sẽ chạy trong thời gian được chỉ định. Bằng cách sử dụng setTimeout()và gọi nó một cách đệ quy, bạn đang đảm bảo rằng tất cả các hoạt động trước đó bên trong thời gian chờ đều hoàn tất trước khi lần lặp tiếp theo của mã bắt đầu.

Chỉ để bổ sung. Nếu bạn cần truyền một biến và lặp lại nó, bạn có thể làm như sau:

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

Đầu ra:

1
2
3
...
9
10

Một dòng mỗi giây.

Cho rằng không phải thời gian nào cũng chính xác, nên có một cách để sử dụng setTimeoutđể chính xác hơn một chút là tính toán khoảng thời gian trì hoãn kể từ lần lặp cuối cùng và sau đó điều chỉnh lần lặp tiếp theo sao cho phù hợp. Ví dụ:

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

Vì vậy, lần đầu tiên nó sẽ đợi (ít nhất) 1000 mili giây, khi mã của bạn được thực thi, nó có thể hơi trễ một chút, chẳng hạn 1046 mili giây, vì vậy chúng tôi trừ 46 mili giây cho độ trễ của chúng tôi cho chu kỳ tiếp theo và độ trễ tiếp theo sẽ là chỉ 954 ms. Điều này sẽ không ngăn bộ đếm thời gian hoạt động muộn (điều đó được mong đợi), nhưng giúp bạn ngăn sự chậm trễ tăng lên. (Lưu ý: bạn có thể muốn kiểm tra xem thisDelay < 0có nghĩa là độ trễ cao hơn gấp đôi độ trễ mục tiêu của bạn và bạn đã bỏ lỡ một chu kỳ - tùy thuộc vào cách bạn muốn xử lý trường hợp đó).

Tất nhiên, điều này có thể sẽ không giúp bạn giữ đồng bộ nhiều bộ hẹn giờ, trong trường hợp đó, bạn có thể muốn tìm cách điều khiển tất cả chúng với cùng một bộ hẹn giờ.

Vì vậy, nhìn vào mã của bạn, tất cả sự chậm trễ của bạn là bội số của 500, vì vậy bạn có thể làm điều gì đó như sau:

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

Cách tốt nhất để xử lý thời gian âm thanh là với Web Audio Api, nó có một đồng hồ riêng chính xác bất kể điều gì đang xảy ra trong chuỗi chính. Có một lời giải thích tuyệt vời, ví dụ, v.v. từ Chris Wilson ở đây:

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

Hãy xem trang web này để biết thêm Web Audio API, nó được phát triển để làm chính xác những gì bạn đang theo đuổi.

Sử dụng setInterval()

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

Ở trên sẽ thực hiện alert("Hello");sau mỗi 3 giây.

Theo yêu cầu của bạn

chỉ cho tôi một ví dụ cơ bản về việc sử dụng setTimeout để lặp lại thứ gì đó

chúng tôi có ví dụ sau đây có thể giúp bạn

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

Tôi sử dụng cách này trong cuộc sống công việc: "Quên các vòng lặp chung" trong trường hợp này và sử dụng kết hợp "setInterval" bao gồm "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)
    }

Tái bút: Hãy hiểu rằng hành vi thực sự của (setTimeOut): tất cả chúng sẽ bắt đầu cùng một lúc "ba bla bla bla sẽ bắt đầu đếm ngược trong cùng một thời điểm" vì vậy hãy tạo thời gian chờ khác để sắp xếp việc thực hiện.

PS 2: ví dụ cho vòng lặp thời gian, nhưng đối với vòng lặp phản ứng, bạn có thể sử dụng các sự kiện, hứa không đồng bộ đang chờ đợi ..

Sự cố vòng lặp setTimeout với giải pháp

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

Như ai đó đã chỉ ra, API âm thanh web có bộ đếm thời gian tốt hơn.

Nhưng nói chung, nếu những sự kiện này xảy ra liên tục, bạn đặt tất cả chúng vào cùng một bộ đếm thời gian thì sao? Tôi đang nghĩ về cách hoạt động của một bộ tuần tự .

Thực tế, nó có thể trông giống như thế này?

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

Tôi nghĩ tốt hơn là hết thời gian chờ ở cuối chức năng.

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

Ba chức năng này là cần thiết vì các vars trong chức năng thứ hai sẽ bị ghi đè bằng giá trị mặc định mỗi lần. Khi con trỏ chương trình đến setTimeout, một bước đã được tính toán. Sau đó, màn hình chỉ cần một chút thời gian.

Sử dụng let thay vì var trong mã:

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