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.
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.
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.
Panggil Balik – Ini ialah fungsi yang dilaksanakan selepas masa penangguhan.
Tunda – Kelewatan ialah masa (dalam milisaat) selepas itu fungsi panggil balik dilaksanakan.
setTimeOut() mengembalikan id unik yang boleh kita gunakan untuk menamatkan pemasa.
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>
setTimeOut() melaksanakan fungsi panggil balik sekali sahaja, tetapi fungsi setInterval() melaksanakan kod selepas setiap selang masa yang kita hantar sebagai argumen kedua kepada setInterval().
Pengguna boleh menggunakan fungsi setInterval() mengikut sintaks berikut.
setInterval(callback, interval)
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.
Fungsi setInterval() juga mengembalikan id unik seperti fungsi setTimeout(), yang boleh kita gunakan untuk menghentikan pemasa.
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>
Selepas memulakan pemasa, kita juga perlu menghentikannya. Kita boleh menggunakan fungsi clearTimeOut() untuk menghentikan fungsi setTimeOut() dan fungsi clearInterval() untuk menghentikan fungsi setInterval().
// To stop the setTimeOut() function clearTimeout(TimerId); // To stop the setInterval() function clearInterval(TimerId);
TimerId – Ia ialah ID unik yang dikembalikan oleh fungsi setTimeOut() atau setInterval().
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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
