Bagaimana untuk melaksanakan pelaksanaan tertunda dalam gelung JavaScript?

Question

Saya mahu menambah kelewatan/tidur dalam semasa

Saya mencuba yang berikut:

alert('hi');

for(var start = 1; start < 10; start++) {
  setTimeout(fungsi () {
    makluman('hello');
  }, 3000);
}

Hanya kes pertama yang betul: selepas memaparkan alert('hi'), ia akan menunggu selama 3 saat dan kemudian memaparkan alert('hello' )< /code>, tetapi kemudian alert('hello') akan dipaparkan berulang kali.

Apa yang saya mahu ialah selepas 3 saat menunjukkan alert('hello'), ia perlu menunggu 3 saat lagi sebelum menunjukkan alert(' hello')< ;/code>, dan sebagainya.

Answer 1

Sejak ES7, terdapat cara yang lebih baik untuk menunggugelung:

// 返回一个在“ms”毫秒后解析的Promise
const timer = ms => new Promise(res => setTimeout(res, ms))

async function load () { // 我们需要将循环包装在一个异步函数中才能使其工作
  for (var i = 0; i < 3; i++) {
    console.log(i);
    await timer(3000); // 然后可以等待创建的Promise
  }
}

load();

Apabila enjin mencapai bahagian menunggu, ia menetapkan tamat masa dan await部分时，它设置一个超时并暂停执行async函数menjeda pelaksanaan fungsi async. Kemudian, apabila tamat masa selesai, pelaksanaan diteruskan pada ketika itu. Ini sangat berguna kerana anda boleh menangguhkan (1) gelung bersarang, (2) bersyarat, (3) fungsi bersarang:

async function task(i) { // 3
  await timer(1000);
  console.log(`Task ${i} done!`);
}

async function main() {
  for(let i = 0; i < 100; i+= 10) {
    for(let j = 0; j < 10; j++) { // 1
      if(j % 2) { // 2
        await task(i + j);
      }
    }
  }
}
    
main();

function timer(ms) { return new Promise(res => setTimeout(res, ms)); }

Rujukan mengenai MDN

Walaupun ES7 kini disokong oleh NodeJS dan penyemak imbas moden, anda mungkin mahu menggunakan Memindahkan dengan BabelJS untuk dijalankan di mana-mana.

Answer 2

setTimeout() Fungsi tidak menyekat dan kembali serta-merta. Jadi gelung anda berulang dengan cepat dan mencetuskan tamat masa 3 saat berturut-turut. Itulah sebabnya makluman pertama anda muncul selepas 3 saat dan semua makluman lain mengikuti secara berterusan tanpa sebarang kelewatan.

Anda mungkin mahu menggunakan kod yang serupa dengan:

var i = 1;                  //  将计数器设置为1

function myLoop() {         //  创建一个循环函数
  setTimeout(function() {   //  当调用循环时，调用一个3秒的setTimeout
    console.log('hello');   //  在这里写入您的代码
    i++;                    //  增加计数器
    if (i < 10) {           //  如果计数器小于10，则调用循环函数
      myLoop();             //  ..  再次触发另一个setTimeout()
    }                       //  ..  
  }, 3000)
}

myLoop();                   //  启动循环