Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >penggunaan setinterval javascript
penggunaan setinterval javascript
- WBOYasal
- 2023-05-15 20:16:051457semak imbas
JavaScript ialah salah satu bahasa pengaturcaraan bahagian hadapan yang paling biasa digunakan Ia mempunyai fungsi yang berkuasa dan ciri yang fleksibel Salah satu ciri penting ialah setInterval(). setInterval() ialah kaedah JavaScript yang digunakan untuk mencipta selang untuk melaksanakan kod. Ia membolehkan anda memanggil kod berulang kali pada selang waktu tertentu. Dalam artikel ini, kami akan memperkenalkan penggunaan setInterval() secara terperinci dan memberikan beberapa contoh praktikal. Sintaks asas kaedah
setInterval() adalah seperti berikut:
setInterval(fungsi, milisaat);
Antaranya, parameter pertama ialah blok kod yang akan dilaksanakan, dan yang kedua Parameter ialah selang antara melaksanakan kod, dalam milisaat.
Berikut ialah contoh mudah:
setInterval(function(){
console.log("Hello World!");
}, 1000);Kod ini akan mengeluarkan "Hello World!" Kaedah setInterval() memerlukan fungsi sebagai parameter untuk melaksanakan blok kod. Jika anda perlu lulus parameter, anda boleh menggunakan fungsi tanpa nama untuk mencapai ini. Contohnya:
var name = "Mike";
setInterval(function(){
console.log("Hello " + name + "!");
}, 1000);Contoh ini akan mengeluarkan "Hello Mike!" Dalam contoh ini, kami menggunakan pembolehubah untuk menghantar parameter nama untuk digunakan dalam blok kod.
Kaedah setInterval() mengembalikan pengecam yang boleh digunakan untuk mengosongkan pemasa. Berikut ialah contoh:
var timer = setInterval(function(){
console.log("Hello World!");
}, 1000);
// 清除定时器
clearInterval(timer);Dalam contoh ini, kami mula-mula menyimpan nilai pulangan kaedah setInterval() dalam pemasa berubah-ubah, dan kemudian gunakan kaedah clearInterval() untuk mengosongkan pemasa. Ini akan menghentikan pelaksanaan blok kod dan mengosongkan memori yang berkaitan.
Kaedah setInterval() juga boleh disarangkan untuk melaksanakan blok kod pada berbilang selang masa. Contohnya:
setInterval(function(){
console.log("First block of code");
setTimeout(function(){
console.log("Second block of code");
}, 500);
}, 1000);Dalam contoh ini, kami telah menentukan dua blok kod. Blok kod pertama akan mengeluarkan "Blok kod pertama" setiap 1 saat. Pada penghujung blok kod pertama, kami menggunakan kaedah setTimeout() untuk menentukan blok kod kedua, yang akan mengeluarkan "Blok kod kedua" setiap 0.5 saat. Kedua-dua blok kod akan mempunyai selang masa yang berbeza.
Akhir sekali, mari kita lihat contoh praktikal menggunakan kaedah setInterval(). Katakan kita sedang mencipta jam randik dalam talian. Kami memerlukan pemasa untuk merakam detik dan memaparkan nombor pada skrin. Berikut ialah kod untuk apl:
<!DOCTYPE html>
<html>
<head>
<title>Online Timer</title>
</head>
<body>
<h1>Online Timer</h1>
<p id="output">0</p>
<button onclick="startTimer()">Start</button>
<button onclick="stopTimer()">Stop</button>
<button onclick="resetTimer()">Reset</button>
<script>
var timer = null;
var count = 0;
function startTimer(){
timer = setInterval(function(){
count++;
document.getElementById("output").innerHTML = count;
}, 1000);
}
function stopTimer(){
clearInterval(timer);
}
function resetTimer(){
count = 0;
document.getElementById("output").innerHTML = count;
clearInterval(timer);
}
</script>
</body>
</html>Kod tersebut termasuk tiga butang: Mula, Berhenti dan Tetapkan Semula. Apabila diklik pada butang mula, fungsi startTimer() dipanggil, yang mencipta fungsi setInterval() yang melaksanakan setiap saat. Fungsi ini akan merakam masa berlalu dan memaparkannya pada skrin. Apabila butang berhenti diklik, fungsi stopTimer() dipanggil, yang mengosongkan panggilan ke fungsi setInterval() dan menghentikan pemasa. Apabila diklik pada butang set semula, fungsi resetTimer() dipanggil, yang menetapkan semula pembilang kepada 0 dan kemudian menghentikan pemasa.
Ringkasnya, setInterval() ialah kaedah yang sangat berguna dalam JavaScript, yang membolehkan anda melaksanakan blok kod dengan mudah pada selang waktu tertentu. Menggunakannya boleh meningkatkan kecekapan pengaturcaraan JavaScript anda.
Atas ialah kandungan terperinci penggunaan setinterval javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!