Rumah > hujung hadapan web > Soal Jawab bahagian hadapan > penggunaan settimeout javascript

penggunaan settimeout javascript

王林
Lepaskan: 2023-05-17 16:14:08
asal
1031 orang telah melayarinya

setTimeout() dalam JavaScript ialah fungsi yang sangat berguna yang membolehkan anda melaksanakan kod tertentu selepas tempoh masa tertentu. Kaedah ini menerima dua parameter: kod untuk dilaksanakan dan masa dalam milisaat. Selepas masa yang ditetapkan, kod yang dilaksanakan akan dipanggil.

Kaedah setTimeout() selalunya digunakan untuk mencipta kesan kelewatan atau melakukan tindakan tertentu selepas masa tertentu. Anda boleh melaksanakan sebarang kod JavaScript selepas masa yang ditetapkan, daripada tetingkap amaran mudah dan mesej pop timbul, kepada melaksanakan fungsi atau operasi yang kompleks.

Kini, kita akan mengetahui lebih lanjut tentang penggunaan setTimeout.

Pelaksanaan kod tertunda

Pelaksanaan kod tertunda ialah salah satu penggunaan paling asas setTimeout. Berikut ialah contoh asas:

setTimeout(function(){
    alert("Hello World!");
}, 3000);
Salin selepas log masuk

Kod di atas akan muncul dalam kotak mesej "Hello World!" selepas pengguna menunggu selama 3 saat.

Dalam kod, parameter pertama ialah fungsi tanpa nama kerana kita perlu melaksanakan kod dan bukannya memanggil fungsi secara terus. Parameter kedua menentukan masa untuk menangguhkan, di sini ialah milisaat. Dalam contoh ini, kami menentukan 3 saat (3000 milisaat) sebagai tempoh.

Memanipulasi elemen DOM

setTimeout() juga boleh digunakan untuk memanipulasi elemen DOM. Sebagai contoh, kod berikut akan menukar kandungan elemen tajuk halaman selepas tempoh masa tertentu:

let pageTitle = document.getElementById("page-title");
setTimeout(function(){
    pageTitle.textContent = "New Page Title";
}, 5000);
Salin selepas log masuk

Dalam contoh ini, kami mula-mula mendapatkan elemen halaman dengan id "page-title" dan menyimpannya dalam dalam pembolehubah. Kami seterusnya menggunakan setTimeout() untuk menukar sifat textContent elemen, menukar tajuk halaman kepada "Tajuk Halaman Baharu". Dalam contoh ini, kami menggunakan kelewatan selama 5 saat.

Batalkan setTimeout()

Dalam sesetengah kes, anda mungkin perlu membatalkan pelaksanaan fungsi setTimeout() sebelum pemasa selesai. Untuk membatalkan pemasa, anda boleh menggunakan fungsi clearTimeout(). Sebagai contoh, kod berikut akan mencipta pemasa dalam panggilan ke fungsi setTimeout() sebagai hujah pertama. Selepas 5 saat, jika pengguna mengklik pada elemen, pemasa akan dibatalkan.

let timer = setTimeout(function(){
    alert("You've waited too long!");
}, 5000);

document.getElementById("some-element").addEventListener("click", function(){
    clearTimeout(timer);
});
Salin selepas log masuk

Dalam contoh ini, kami mula-mula menyimpan nombor ID pemasa supaya kami boleh membatalkannya kemudian menggunakan fungsi clearTimeout(). Kami seterusnya menggunakan fungsi addEventListener() untuk mengaitkan kod yang mengosongkan pemasa dengan pengguna mengklik elemen pada halaman. Menggunakan pendekatan ini, anda boleh membatalkan operasi tertunda apabila keadaan tertentu dicapai.

Kesimpulan

setTimeout() ialah fungsi yang sangat berguna untuk melaksanakan kod selepas kelewatan. Ia boleh digunakan untuk pelbagai tujuan, termasuk memaparkan tetingkap amaran, memanipulasi elemen DOM, menambah kesan kelewatan dan melaksanakan fungsi yang kompleks. Dalam semua kes, anda boleh menggunakan fungsi clearTimeout() untuk membatalkan pemasa dan menghalang pelaksanaan operasi.

Atas ialah kandungan terperinci penggunaan settimeout javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan