Loop javascript setiap 5 detik

Selamat datang di tutorial tentang cara menjalankan Javascript setiap detik. Jadi, Anda ingin mengulang sepotong kode tanpa henti dan menjalankannya setiap detik (atau setiap X detik)?

Cara termudah untuk menjalankan Javascript setiap detik adalah dengan menggunakan fungsi setInterval(). Sebagai contoh

• function foo () { console.log("RUNNING"); }_
• setInterval(foo, 1000);

Itu mencakup dasar-dasar cepat, tetapi mari kita telusuri beberapa contoh aktual dalam panduan ini. Baca terus

ⓘ Saya telah menyertakan file zip dengan semua kode sumber contoh di awal tutorial ini, jadi Anda tidak perlu menyalin-tempel semuanya… Atau jika Anda hanya ingin langsung masuk

TLDR – SLIDE CEPAT

Unduh & Catatan

UNDUH & CATATAN

Pertama, berikut adalah tautan unduhan ke kode contoh seperti yang dijanjikan

CATATAN CEPAT

DOWNLOAD KODE CONTOH

Klik di sini untuk mengunduh kode sumber, saya telah merilisnya di bawah lisensi MIT, jadi silakan membangun di atasnya atau menggunakannya dalam proyek Anda sendiri

JALANKAN JAVASCRIPT SETIAP DETIK

Baiklah, mari kita mulai dengan contoh tentang cara mengulang Javascript setiap detik

METODE 1) WAKTU INTERVAL

1-set-interval. html

<!-- (A) CURRENT TIME WILL BE SHOWN HERE -->
<div id="timeNow"></div>
 
<script>
// (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML
var showTime = () => {
  let now = new Date(),
      hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds();
  document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`;
};
 
// (C) START INTERVAL
var timer = setInterval(showTime, 1000);
// TO STOP - clearInterval(timer);
</script>

Seperti pada cuplikan pendahuluan

• (B) Mulailah dengan membuat fungsi yang ingin Anda jalankan setiap detik. Dalam contoh ini, itu adalah showTime()
• (C) Gunakan setInterval(FUNCTION, DELAY)_ untuk membuat penghitung waktu interval. Ini akan mengaktifkan FUNCTION yang diberikan untuk setiap DELAY mikrodetik. Saya. E. 1000 ms sama dengan 1 detik

METODE 2) FUNGSI REKURSIF

2-rekursif. html

<!-- (A) CURRENT TIME WILL BE SHOWN HERE -->
<div id="timeNow"></div>
  
 <script>
// (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML
var showTime = () => {
  // (B1) UPDATE HTML
  let now = new Date(),
      hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds();
  document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`;
 
  // (B2) LOOP
  timer = setTimeout(showTime, 1000);
};
 
// (C) START!
var timer = setTimeout(showTime, 0);
// TO STOP - clearTimeout(timer);
</script>

Trik sederhana lain yang kami gunakan. Perhatikan (B2), fungsi mengatur dirinya sendiri pada batas waktu 1 detik dan memanggil dirinya sendiri secara rekursif

METODE 3) LOOP INFINITE

3-async-loop. html

<!-- (A) CURRENT TIME WILL BE SHOWN HERE -->
<div id="timeNow"></div>
 
<script>
// (B) RUN EVERY SECOND TO UPDATE TIME
var showTime = async () => { while (true) {
  // (B1) UPDATE CURRENT TIME
  let now = new Date(),
      hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds();
  document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`;

  // (B2) WAIT FOR 1 SECOND
  await new Promise(resolve => setTimeout(resolve, 1000));
}};
 
// (C) START!
showTime();
</script>

Terakhir, ini adalah "solusi modern" yang funky

• (B) Ide dasarnya adalah membuat loop

  <!-- (A) CURRENT TIME WILL BE SHOWN HERE -->
  <div id="timeNow"></div>
    
   <script>
  // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML
  var showTime = () => {
    // (B1) UPDATE HTML
    let now = new Date(),
        hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds();
    document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`;
   
    // (B2) LOOP
    timer = setTimeout(showTime, 1000);
  };
   
  // (C) START!
  var timer = setTimeout(showTime, 0);
  // TO STOP - clearTimeout(timer);
  </script>

  0 tanpa akhir. Namun karena ini akan memblokir dan “menggantung” seluruh halaman, ini hanya dapat dilakukan dalam

  <!-- (A) CURRENT TIME WILL BE SHOWN HERE -->
  <div id="timeNow"></div>
    
   <script>
  // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML
  var showTime = () => {
    // (B1) UPDATE HTML
    let now = new Date(),
        hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds();
    document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`;
   
    // (B2) LOOP
    timer = setTimeout(showTime, 1000);
  };
   
  // (C) START!
  var timer = setTimeout(showTime, 0);
  // TO STOP - clearTimeout(timer);
  </script>

  1
• (B2) Di akhir setiap siklus, kami melakukan

  <!-- (A) CURRENT TIME WILL BE SHOWN HERE -->
  <div id="timeNow"></div>
    
   <script>
  // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML
  var showTime = () => {
    // (B1) UPDATE HTML
    let now = new Date(),
        hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds();
    document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`;
   
    // (B2) LOOP
    timer = setTimeout(showTime, 1000);
  };
   
  // (C) START!
  var timer = setTimeout(showTime, 0);
  // TO STOP - clearTimeout(timer);
  </script>

  2. Ini agak membingungkan, tetapi pada dasarnya menunggu selama 1 detik sebelum mengulang sendiri

BIT & LINK EKSTRA

Itu saja untuk tutorial ini, dan ini adalah bagian kecil tentang beberapa tambahan dan tautan yang mungkin berguna bagi Anda

MANA YANG LEBIH BAIK?

Secara pribadi, saya lebih suka setInterval(). Ini adalah metode paling tradisional dan paling mudah dipahami. Sementara beberapa orang mungkin berpendapat bahwa

<!-- (A) CURRENT TIME WILL BE SHOWN HERE -->
<div id="timeNow"></div>
  
 <script>
// (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML
var showTime = () => {
  // (B1) UPDATE HTML
  let now = new Date(),
      hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds();
  document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`;
 
  // (B2) LOOP
  timer = setTimeout(showTime, 1000);
};
 
// (C) START!
var timer = setTimeout(showTime, 0);
// TO STOP - clearTimeout(timer);
</script>

<!-- (A) CURRENT TIME WILL BE SHOWN HERE -->
<div id="timeNow"></div>
  
 <script>
// (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML
var showTime = () => {
  // (B1) UPDATE HTML
  let now = new Date(),
      hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds();
  document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`;
 
  // (B2) LOOP
  timer = setTimeout(showTime, 1000);
};
 
// (C) START!
var timer = setTimeout(showTime, 0);
// TO STOP - clearTimeout(timer);
</script>

LINK dan REFERENSI

• Setel interval pada MDN
• Tetapkan batas waktu pada MDN
• Fungsi asinkron
• Tunggu di MDN

LEMBAR CHEAT INFOGRAFIS

Terima kasih telah membaca, dan kami telah sampai di akhir panduan ini. Saya harap ini membantu Anda dengan proyek Anda, dan jika Anda ingin berbagi apa pun dengan panduan ini, jangan ragu untuk berkomentar di bawah ini. Semoga berhasil dan selamat membuat kode

Bagaimana cara memanggil fungsi setiap 5 detik JavaScript?

Bagaimana cara memanggil fungsi setiap 1 detik dalam JavaScript?

Bagaimana cara menunggu 1 detik dalam JavaScript?

Bagaimana Anda mengulang loop dalam JavaScript?