Rumah > Artikel > hujung hadapan web > Terangkan cara pemasa berfungsi dalam JavaScript

Terangkan cara pemasa berfungsi dalam JavaScript

WBOYke hadapan: 2023-08-25 10:05:02852semak imbas

解释 JavaScript 中定时器的工作原理

Dalam JavaScript, pemasa ialah ciri yang sangat penting. Seperti pemasa jam biasa, kita boleh memulakan pemasa pada masa tertentu dan melaksanakan fungsi atau kod dalam JavaScript selepas masa tertentu.

Ringkasnya, kita boleh menggunakan pemasa untuk melaksanakan kod selepas kelewatan. Sebagai contoh, apabila anda melawat tapak web, kotak pendaftaran akan dipaparkan selepas 3 hingga 4 minit Kami boleh menggunakan JavaScript untuk mencapai ini. Kami boleh menetapkan pemasa kelewatan untuk menunjukkan pop timbul pendaftaran.

Satu lagi contoh pemasa yang hebat dalam kehidupan sebenar ialah pengiklanan dalam apl. Apabila anda membuka mana-mana apl, ia mula memaparkan iklan selepas 2 hingga 3 minit dan menukar iklan pada selang 1 hingga 2 minit.

Jadi, terdapat dua fungsi berbeza dalam JavaScript untuk menetapkan pemasa, yang akan kami terokai dalam tutorial ini.

Gunakan fungsi setTimeOut() untuk melaksanakan kod selepas masa tertentu

Fungsi

setTimeOut() membolehkan kami melaksanakan kod selepas kelewatan tertentu. Walau bagaimanapun, ia membolehkan kami menentukan kelewatan. Ia melaksanakan kod hanya sekali selepas kelewatan tertentu.

Apabila fungsi setTimeOut() dilaksanakan, ia memulakan pemasa dan melaksanakan fungsi panggil balik selepas kelewatan tertentu.

Tatabahasa

Pengguna boleh menggunakan fungsi setTimeOut() mengikut sintaks berikut.

let timeoutId = setTimeout(callback, delay);

Dalam sintaks di atas, fungsi panggil balik juga boleh dilaksanakan sebagai fungsi anak panah.

Parameter

Panggil Balik – Ini ialah fungsi yang dilaksanakan selepas masa penangguhan.
Tunda – Kelewatan ialah masa (dalam milisaat) selepas itu fungsi panggil balik dilaksanakan.

Nilai pulangan

Fungsi

setTimeOut() mengembalikan id unik yang boleh kita gunakan untuk menamatkan pemasa.

Contoh

Dalam contoh di bawah, apabila pengguna mengklik butang "Mulakan Pemasa", ia memanggil fungsi callTimer(). Pengguna boleh melihat bahawa ia mencetak "fungsi callTimer dilaksanakan dahulu", dan selepas 2000 milisaat, kerana fungsi setTimeOut() memanggil fungsi panggil balik selepas 2000 milisaat, ia mencetak "fungsi ini dilaksanakan selepas kelewatan".

<html>
   <body>
      <h2> Using the setTimeOut() function </h2>
      <div id = "output"> </div>
      <button id = "btn" onclick = "callTimer()"> Start Timer </button>
      <script>
         let output = document.getElementById("output");
         output.innerHTML += "Program execution started </br>";
         function callTimer() {
            output.innerHTML = "The callTimer function executed  <br/>";
            setTimeout(callback, 2000);
         }
         function callback() {
            output.innerHTML += "This function executed after some delay.";
         }
      </script>
   </body>
</html>

Gunakan fungsi setInterval() untuk melaksanakan fungsi selepas setiap selang masa

Fungsi

setTimeOut() melaksanakan fungsi panggil balik sekali sahaja, tetapi fungsi setInterval() melaksanakan kod selepas setiap selang masa yang kita hantar sebagai argumen kedua kepada setInterval().

Tatabahasa

Pengguna boleh menggunakan fungsi setInterval() mengikut sintaks berikut.

setInterval(callback, interval)

Parameter

Panggil Balik – Ini ialah fungsi yang fungsi setInterval() panggil selepas setiap selang masa.
Selang – Masa dalam milisaat selepas itu fungsi panggil balik dipanggil selepas setiap selang.

Nilai pulangan

Fungsi setInterval() juga mengembalikan id unik seperti fungsi setTimeout(), yang boleh kita gunakan untuk menghentikan pemasa.

Contoh

Dalam contoh ini, kami menggunakan fungsi setInterval() untuk memanggil fungsi panggil balik setiap 1000 milisaat. Pengguna boleh melihat bahawa apabila butang pemasa mula ditekan, fungsi startInterval() dilaksanakan dan fungsi setInterval() dipanggil. Fungsi setInterval() memanggil fungsi panggil balik sekali setiap saat.

<html>
   <body>
      <h2> Using the <i> setInterval() </i> function </h2>
      <div id = "output"> </div>
      <button id = "btn" onclick = "startInterval()"> Start Timer </button>
      <script>
         let output = document.getElementById("output");
         let count = 0;
         output.innerHTML += "Program execution started </br>";
         
         // when user clicks on the button, startInterval() function will be called
         function startInterval() {
            output.innerHTML = "The callTimer function executed <br/>";
            
            // the setInterval() function will call the callback function after every second.
            setInterval(callback, 1000);
         }
         function callback() {
            output.innerHTML += "This function executed for " + count + " time </br>";
            
            // update the count to track of howmany times a callback is called.
            count = count + 1;
         }
      </script>
   </body>
</html>

Gunakan fungsi clearTimeOut() dan clearInterval() untuk menamatkan pemasa

Selepas memulakan pemasa, kita juga perlu menghentikannya. Kita boleh menggunakan fungsi clearTimeOut() untuk menghentikan fungsi setTimeOut() dan fungsi clearInterval() untuk menghentikan fungsi setInterval().

Tatabahasa

// To stop the setTimeOut() function
clearTimeout(TimerId);

// To stop the setInterval() function
clearInterval(TimerId);

Parameter

TimerId – Ia ialah ID unik yang dikembalikan oleh fungsi setTimeOut() atau setInterval().

Contoh

Dalam contoh di bawah, kami menggunakan fungsi pemasa setInterval() untuk memanggil fungsi setiap saat. Selain itu, kami menjejaki bilangan kali fungsi setInterval() memanggil fungsi panggil balik.

Dalam fungsi panggil balik, kami menggunakan pernyataan if untuk menyemak sama ada kiraan lebih daripada 3 dan menggunakan fungsi clearInterval() untuk menamatkan pemasa.

<html>
   <body>
      <h2> Using the <i> clearInterval() </i> function </h2>
      <div id = "output"> </div>
      <button id = "btn" onclick = "startInterval()"> Start Timer </button>
      <script>
         let output = document.getElementById("output");
         let count = 0;
         let TimerId = "";
         function startInterval() {
            TimerId = setInterval(() => {
               output.innerHTML += "count = " + count + "<br/>";
               count += 1;
               if (count > 3) {
                  clearInterval(TimerId);
               }
            }, 1000);
         }
      </script>
   </body>
</html>

Dalam output di atas, pengguna boleh memerhatikan bahawa ia mencetak sehingga kiraan = 3 kerana apabila kiraan lebih daripada 3 kami menamatkan pemasa.

Atas ialah kandungan terperinci Terangkan cara pemasa berfungsi dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript if count 回调函数

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menambah elemen secara mendatar dalam halaman HTML menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk menambah elemen secara mendatar dalam halaman HTML menggunakan JavaScript?

Artikel berkaitan

Lihat lagi