Setinterval di untuk loop javascript

Saat bekerja dengan Node. js sangat penting untuk memahami Node's Event Loop dan fase-fasenya. Fase pertama dari Event Loop Node adalah timer, dan panggilan baliknya. Memahami penghitung waktu, dan kapan panggilan baliknya dipanggil, adalah langkah pertama untuk memahami eksekusi kode terjadwal. Ini memungkinkan kita untuk lebih mengontrol kontinum waktu aplikasi kita. Di Node. timer js dapat diatur dengan dua fungsi utama

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Dalam tutorial ini kita akan

• Lebih lanjut pengetahuan kita tentang fase pengatur waktu dari Node. js Event Loop melalui eksplorasi contoh kode
• Pelajari konsep penjadwalan kode dan cara melakukannya dengan

  const alert = "We are ready; start the movie";
  
  // This is what we see in the console first.
  console.log("This is a pre-show ad reel.. It's running");
  
  // setTimeout() function with anonymous callback
  // and delay in milliseconds.
  setTimeout(() => {
    console.log(alert);
  }, 5000);
  

  8 dan

  const alert = "We are ready; start the movie";
  
  // This is what we see in the console first.
  console.log("This is a pre-show ad reel.. It's running");
  
  // setTimeout() function with anonymous callback
  // and delay in milliseconds.
  setTimeout(() => {
    console.log(alert);
  }, 5000);
  

  9
• Dapatkan pemahaman tentang waktu eksekusi callback dan perbedaan antar timer dalam konteks Node.js. js dan browser

Pada akhir tutorial ini, Anda harus dapat menjelaskan bagaimana penghitung waktu yang dibuat dengan

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Sasaran

Pelajari cara menggunakan

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Prasyarat

Menjadwalkan panggilan balik satu kali dengan const alert = "We are ready; start the movie"; // This is what we see in the console first. console.log("This is a pre-show ad reel.. It's running"); // setTimeout() function with anonymous callback // and delay in milliseconds. setTimeout(() => { console.log(alert); }, 5000); 8

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Contoh

setTimeout(function, delay, [arg1], [arg2], ...);

Fungsi

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

• $ node timers.js
  

  _9. Fungsi panggilan balik yang perlu dipanggil saat waktu tunda habis

• $ node timers.js
  This is a pre-show ad reel.. It\'s running
  

  0. Jumlah milidetik untuk menunda sebelum menelepon

  $ node timers.js
  

  9

Argumen tambahan apa pun akan diteruskan ke fungsi callback saat dijalankan

Bayangkan Anda berada di bioskop, dan akan menonton film. Anda bersemangat, tetapi Anda terjebak menonton pra-pertunjukan karena petugas film sedang menunggu isyarat untuk memutar film

Mari jalankan skenario ini di konsol. Buat file bernama timer. js. Dalam file ini tentukan variabel

$ node timers.js
This is a pre-show ad reel.. It\'s running

$ node timers.js
This is a pre-show ad reel.. It\'s running

Kode Anda mungkin terlihat seperti ini

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Setelah siap, jalankan kode Anda dengan perintah

$ node timers.js

Di konsol pada awalnya kami melihat teks gulungan demo pra-pertunjukan kami

$ node timers.js
This is a pre-show ad reel.. It\'s running

Kemudian setelah

$ node timers.js
This is a pre-show ad reel.. It\'s running

$ node timers.js
This is a pre-show ad reel.. It\'s running
We are ready; start the movie

Mari kita lihat apa yang terjadi di sini dari perspektif Event Loop. Proses aplikasi kami dimulai dan memasuki Event Loop. Itu pergi ke fase pertama - "timer" - di mana ia memeriksa callback timer. Pada awalnya kami tidak punya;

Event Loop berlanjut ke fase selanjutnya. "I/O callback", "idle", dan terakhir, "polling". Pada fase "polling", Event Loop mengeksekusi

$ node timers.js
This is a pre-show ad reel.. It\'s running

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Karena kami tidak memiliki kode lain setelah

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

$ node timers.js
This is a pre-show ad reel.. It\'s running

Setelah itu, dilanjutkan melalui fase Event Loop hingga mencapai fase

$ node timers.js
This is a pre-show ad reel.. It\'s running

$ node timers.js
This is a pre-show ad reel.. It\'s running
We are ready; start the movie

Tangkapannya di sini adalah untuk memahami bahwa

$ node timers.js
This is a pre-show ad reel.. It\'s running

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Mari kita lihat ini dalam kode. Di pengatur waktu. js, ubah

$ node timers.js
This is a pre-show ad reel.. It\'s running

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Mengedit pengatur waktu. js

const alert = "We are ready, start the movie";

// Emulation of the demo (ad) reel.
const demoReel = () => {
  const length = 500000000;
  let sum = 0;
  for (i = 0; i <= length; i++) {
    sum += i;
  }
};
// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 10);
demoReel();

Kemudian jalankan kode dengan perintah berikut

$ node timers.js

Perhatikan bagaimana di konsol pesan "film siap dimulai" kami tidak lagi ditampilkan secara instan. Callback timer berada dalam antrean fase timer dari Event Loop tetapi fungsi

$ node timers.js
This is a pre-show ad reel.. It\'s running
We are ready; start the movie

$ node timers.js
This is a pre-show ad reel.. It\'s running
We are ready; start the movie

Timer menunggu hingga dieksekusi, lalu fase

$ node timers.js
This is a pre-show ad reel.. It\'s running

Menjadwalkan callback berulang dengan const alert = "We are ready; start the movie"; // This is what we see in the console first. console.log("This is a pre-show ad reel.. It's running"); // setTimeout() function with anonymous callback // and delay in milliseconds. setTimeout(() => { console.log(alert); }, 5000); 9

Dalam situasi ketika Anda harus dapat mengeksekusi blok kode berulang kali, timer

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

$ node timers.js

$ node timers.js
This is a pre-show ad reel.. It\'s running

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

const alert = "We are ready, start the movie";

// Emulation of the demo (ad) reel.
const demoReel = () => {
  const length = 500000000;
  let sum = 0;
  for (i = 0; i <= length; i++) {
    sum += i;
  }
};
// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 10);
demoReel();

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Mari kita kembali ke bioskop. Bayangkan kami berdebat tentang film apa yang harus ditonton dan akhirnya terlambat. Semua kursi sepertinya sudah terjual habis dan sepertinya kita akan ketinggalan. Namun, biasanya teater ini merilis beberapa tiket menjelang dimulainya pertunjukan secara online. Kami ingin memeriksa apakah ada kursi yang tersedia, sekali setiap detik, dan jika ada dua atau lebih maka pesanlah tiketnya. Kode untuk melakukan itu terlihat seperti berikut

Mengedit pengatur waktu. js sehingga berisi kode ini

// This function emulates us checking available seats.
const getEmptySeats = () => {
  return Math.round(3 * Math.random());
};

// We would like to check every second.
setInterval(() => {
  let seats = getEmptySeats();
  if (seats === 1) {
    console.log(`There is currently ${seats} seat available`);
  } else if (seats === 0) {
    console.log(
      "Oh nooooo, no available seats, looks like we will miss the movie!"
    );
  } else if (seats >= 2) {
    console.log(`${seats} seats are available, book them, quickly!`);
  }
}, 1000);

Kami membuat fungsi pengacak emulasi di bagian atas yang memungkinkan kami mensimulasikan hasil pemeriksaan kursi yang tersedia secara online. Ini akan mengembalikan angka dari 0 hingga 3. Mari jalankan kode kita dan periksa hasilnya

Dalam menjalankan terminal

node timers.js

2 seats are available, book them, quickly!
3 seats are available, book them, quickly!
3 seats are available, book them, quickly!
Oh nooooo, no available seats, looks like we will miss the movie!
2 seats are available, book them, quickly!
2 seats are available, book them, quickly!
2 seats are available, book them, quickly!
There is currently 1 seat available

Kode ini akan berjalan hingga Anda keluar dari proses secara manual dengan

const alert = "We are ready, start the movie";

// Emulation of the demo (ad) reel.
const demoReel = () => {
  const length = 500000000;
  let sum = 0;
  for (i = 0; i <= length; i++) {
    sum += i;
  }
};
// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 10);
demoReel();

Seperti yang Anda lihat, timer sedang berjalan dan kami melihat keluaran konsol. Bagaimana cara kerjanya dalam hal Event Loop? . Lain kali Event Loop berada dalam fase pengatur waktu, callback ini akan dijalankan, asalkan waktu tunda habis. Selama fase polling, panggilan balik akan ditambahkan kembali ke antrean berulang kali karena tanda pengulangan

Saat Anda menjalankan kode, Anda melihat bahwa proses tidak berhenti, berapa pun waktu yang telah berlalu sejak awal eksekusi. Di dunia nyata kita pasti sudah memesan tiket ketika kita melihat pesan pertama dan pergi menonton film. Alasan pengatur waktu tidak berhenti adalah karena libUV memeriksa selama fase "polling" jika ada panggilan balik yang belum selesai. Karena ia melihat

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Jika kami ingin berhenti memeriksa segera setelah kebutuhan kami akan tiket terpenuhi, kami perlu memberi tahu aplikasi kami bahwa pengatur waktu harus menghentikan eksekusi. Ada banyak cara untuk melakukan ini. Mari jelajahi semuanya terkait dengan Event Loop

Pertama kita dapat menggunakan

$ node timers.js
This is a pre-show ad reel.. It\'s running
We are ready; start the movie

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Perhatikan bahwa kita memiliki

$ node timers.js
This is a pre-show ad reel.. It\'s running
We are ready; start the movie

$ node timers.js

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Berhasil. Namun, solusi ini hanya dapat diterima jika kita terlambat menonton film karena di sini kita mematikan seluruh eksekusi runtime -- bukan cara yang paling elegan untuk mengakhiri sesuatu

Dari perspektif Event Loop -- ini diakhiri bersamaan dengan seluruh proses/runtime aplikasi

Node. js memiliki mekanisme yang memungkinkan Anda menghapus pengatur waktu. Mengedit pengatur waktu. file js lagi

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Pertama, kita perlu menyimpan referensi ke timer kita. Lakukan ini dengan menetapkan nilai pengembalian

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

$ node timers.js

Jalankan di terminal Anda dengan

$ node timers.js

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Apa yang terjadi di sini dari perspektif Event Loop? . Saat penundaan habis dan Event Loop berada di fase "timer", callback dijalankan dan kami melihat pesan konsol. "Saat ini tersedia 1 kursi". Ini tidak memenuhi kebutuhan kami dan Event Loop berlanjut ke tahap selanjutnya, kembali ke polling di mana callback dikirim ke antrean penghitung waktu lagi

Kali ini, ketika penundaan habis selama fase pengatur waktu, panggilan balik dipanggil lagi dan hasil pemeriksaannya positif -- kami melihat 2 kursi tersedia. Kami berlari untuk memesan tiket, sambil memberi tahu libUV bahwa pengatur waktu dapat dihapus sehingga panggilan baliknya tidak berakhir di antrian pengatur waktu sekali lagi. Event Loop melewati semua fase yang tersisa, tidak menemukan kode lagi untuk dieksekusi, dan menghentikan eksekusi proses

Sejauh ini bagus, tetapi ada Node.js yang lebih elegan. cara khusus js untuk menghentikan timer. Perhatikan, tidak seperti

$ node timers.js

Mari kita lihat ini beraksi. Kami masih membutuhkan referensi ke pengatur waktu di awal. Nanti, alih-alih memanggil

$ node timers.js

// This function emulates us checking available seats.
const getEmptySeats = () => {
  return Math.round(3 * Math.random());
};

// We would like to check every second.
setInterval(() => {
  let seats = getEmptySeats();
  if (seats === 1) {
    console.log(`There is currently ${seats} seat available`);
  } else if (seats === 0) {
    console.log(
      "Oh nooooo, no available seats, looks like we will miss the movie!"
    );
  } else if (seats >= 2) {
    console.log(`${seats} seats are available, book them, quickly!`);
  }
}, 1000);

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

Seperti yang Anda lihat, di sini kami melakukan panggilan balik beberapa kali hingga kami mencapai kondisi yang memenuhi kebutuhan kami. Dalam hal ini kami memberi tahu libUV bahwa kami tidak peduli lagi dengan pengatur waktu ini. Timer terus berjalan tetapi selama fase "polling", panggilan baliknya tidak ditandai sebagai luar biasa dan dimasukkan ke dalam antrean timer. Eksekusi runtime mendeteksi bahwa tidak ada lagi kode yang beredar dan prosesnya berhenti

Kedua metode,

$ node timers.js

// This function emulates us checking available seats.
const getEmptySeats = () => {
  return Math.round(3 * Math.random());
};

// We would like to check every second.
setInterval(() => {
  let seats = getEmptySeats();
  if (seats === 1) {
    console.log(`There is currently ${seats} seat available`);
  } else if (seats === 0) {
    console.log(
      "Oh nooooo, no available seats, looks like we will miss the movie!"
    );
  } else if (seats >= 2) {
    console.log(`${seats} seats are available, book them, quickly!`);
  }
}, 1000);

$ node timers.js

// This function emulates us checking available seats.
const getEmptySeats = () => {
  return Math.round(3 * Math.random());
};

// We would like to check every second.
setInterval(() => {
  let seats = getEmptySeats();
  if (seats === 1) {
    console.log(`There is currently ${seats} seat available`);
  } else if (seats === 0) {
    console.log(
      "Oh nooooo, no available seats, looks like we will miss the movie!"
    );
  } else if (seats >= 2) {
    console.log(`${seats} seats are available, book them, quickly!`);
  }
}, 1000);

Hal ajaib tentang metode

// This function emulates us checking available seats.
const getEmptySeats = () => {
  return Math.round(3 * Math.random());
};

// We would like to check every second.
setInterval(() => {
  let seats = getEmptySeats();
  if (seats === 1) {
    console.log(`There is currently ${seats} seat available`);
  } else if (seats === 0) {
    console.log(
      "Oh nooooo, no available seats, looks like we will miss the movie!"
    );
  } else if (seats >= 2) {
    console.log(`${seats} seats are available, book them, quickly!`);
  }
}, 1000);

// This function emulates us checking available seats.
const getEmptySeats = () => {
  return Math.round(3 * Math.random());
};

// We would like to check every second.
setInterval(() => {
  let seats = getEmptySeats();
  if (seats === 1) {
    console.log(`There is currently ${seats} seat available`);
  } else if (seats === 0) {
    console.log(
      "Oh nooooo, no available seats, looks like we will miss the movie!"
    );
  } else if (seats >= 2) {
    console.log(`${seats} seats are available, book them, quickly!`);
  }
}, 1000);

Gunakan fungsi

// This function emulates us checking available seats.
const getEmptySeats = () => {
  return Math.round(3 * Math.random());
};

// We would like to check every second.
setInterval(() => {
  let seats = getEmptySeats();
  if (seats === 1) {
    console.log(`There is currently ${seats} seat available`);
  } else if (seats === 0) {
    console.log(
      "Oh nooooo, no available seats, looks like we will miss the movie!"
    );
  } else if (seats >= 2) {
    console.log(`${seats} seats are available, book them, quickly!`);
  }
}, 1000);

Dalam kebanyakan kasus,

$ node timers.js

node timers.js

// This function emulates us checking available seats.
const getEmptySeats = () => {
  return Math.round(3 * Math.random());
};

// We would like to check every second.
setInterval(() => {
  let seats = getEmptySeats();
  if (seats === 1) {
    console.log(`There is currently ${seats} seat available`);
  } else if (seats === 0) {
    console.log(
      "Oh nooooo, no available seats, looks like we will miss the movie!"
    );
  } else if (seats >= 2) {
    console.log(`${seats} seats are available, book them, quickly!`);
  }
}, 1000);

Rekap

Dalam tutorial ini kita terjun ke fase pengatur waktu dari Event Loop melalui berbagai contoh. Kami mempelajari bahwa untuk menjadwalkan eksekusi callback satu kali, gunakan

const alert = "We are ready; start the movie";

// This is what we see in the console first.
console.log("This is a pre-show ad reel.. It's running");

// setTimeout() function with anonymous callback
// and delay in milliseconds.
setTimeout(() => {
  console.log(alert);
}, 5000);

node timers.js

Apakah baik menggunakan setInterval dalam JavaScript?

Apakah setInterval sebuah lingkaran?

Bagaimana fungsi setInterval () bekerja di JavaScript?

Apa yang bisa saya gunakan selain setInterval?