Saya belajar JS beberapa hari yang lalu dan melihat dua fungsi yang sangat menarik, yaitu fungsi setTimeout dan fungsi setInterval. Kedua fungsi ini dapat membuat halaman web menyajikan efek yang sangat umum pada halaman web, seperti carousel gambar, dan beberapa efek yang sangat menyenangkan. Mari kita pelajari tentang dua fungsi di bawah ini!
Sintaks dan aplikasi fungsi setTimeout dan fungsi setInterval
1. Fungsi Salet
Definisi dan Penggunaan: Metode setTimeout () digunakan untuk memanggil fungsi atau menghitung ekspresi setelah jumlah milidetik yang ditentukan.
Sintaks: setTimeout (kode, millisec);
parameter:
Kode (diperlukan): String kode JavaScript yang akan dieksekusi setelah fungsi dipanggil.
Millisec (wajib): Jumlah milidetik untuk menunggu sebelum menjalankan kode.
petunjuk:
setTimeout () hanya menjalankan kode sekali. Jika Anda ingin menelepon beberapa kali, gunakan setInterval () atau minta kode itu sendiri memanggil setTimeout () lagi.
Nilai pengembalian
Nilai yang dapat diteruskan ke window.cleartimeout () untuk membatalkan eksekusi kode berkala.
Karena SetTimeout adalah fungsi timer, ada fungsi untuk membersihkan timer, jadi kami menggunakan fungsi ClearTimeout.
ClearTimeout (nilai ID dikembalikan oleh setTimeout ());
2. Definisi interval
Metode setInterval () memanggil fungsi atau menghitung ekspresi sesuai dengan periode yang ditentukan (dalam milidetik).
Metode setInterval () akan memanggil fungsi secara terus menerus sampai clearInterval () dipanggil atau jendela ditutup. Nilai ID yang dikembalikan oleh setInterval () dapat digunakan sebagai parameter ke metode ClearInterVal ().
tata bahasa
setInterval (kode, millisec [, "lang"]);
Kode parameter diperlukan. Fungsi yang akan dipanggil atau string kode yang akan dieksekusi.
Millisec harus. Interval antara eksekusi periodik atau kode panggilan, dalam milidetik
Nilai pengembalian
Nilai yang dapat diteruskan ke window.clearInterval () untuk membatalkan eksekusi berkala kode.
Karena SetTimeout adalah fungsi pengatur waktu, ada fungsi untuk membersihkan timer, jadi kami menggunakan fungsi clearinterval ().
clearInterval () (nilai ID dikembalikan oleh setInterval ());
2. Kasus:
Efek hitung mundur
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = UTF-8"/> <it title> content-type = "Text/html; charset = UTF-8"//TTETETED/TYPE CONTENTDIND </Text/html; charset = UTF-8 "//title title> contentDown </" Text = "TEXMAS =" TEXMAS = "TEXMAS =" TEXMAS = "UTF-8"//TTETDOCT/TEXTDOW "TEXT/TEXML; efek hitung mundur var t1; window.onload = function () {// 01 Posisi ke tombol start dan mengembalikan objek DOM var btns = document.getElementById ('btnstart'); // 02. Daftarkan acara klik untuk tombol start btns.onClick = function () {// Jalankan fungsi bahwa parameter pertama dari fungsi setInterval harus dieksekusi secara teratur, dan parameter kedua adalah fungsi yang mengeksekusi setiap milidetik T1 = SetInterval (Mulai, 1000); } // 03 Posisi ke tombol berhenti untuk mengembalikan objek DOM var btnst = document.getElementById ('btnstop'); btnst.onClick = function () {clearInterval (t1); }} // Fungsi untuk dieksekusi 1 Fungsi start kedua () {// 01. Dapatkan teks di div untuk ditetapkan ke variabel var divdom = document.geteLementById ('msg'); var divnum = divdom.innerText; // menilai apakah nilai divnum adalah 0 if (divnum> 0) {divnum--; // Putar kembali nilai yang dikurangi menjadi divdom divdom.innertext = divnum; }} </script> </head> <body> <input type = "tombol" id = "btnstart" value = "start"/> <input type = "tombol" id = "btnstop" value = "stop"/> <br/> <div id = "msg"> 10 </div> </body> </html>Latar belakang switching gambar:
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script type="text/javascript"> var count = 1;//Define the variabel awal ke gambar pertama dengan window.onload = function () {// Tentukan fungsi show setiap detik menggunakan fungsi timer untuk mengeksekusi setInterval (show, 1000); } // Fungsi yang akan dieksekusi Function Show () {// Jika gambar mencapai yang terakhir (5 gambar), ubah gambar yang ditampilkan berikutnya ke yang pertama. Jika gambar terakhir tidak tercapai, gambar berikutnya akan ditampilkan jika (hitung> 5) {count = 1; } else {count ++; } // Dapatkan objek DOM dengan id myimg var dom = document.getElementById ("myimg"); // Ubah atribut SRC yang menunjuk tag IMG, dan ubah gambar dom.src = "gambar/"+count+". Jpg"} </script> </head> <body> <img src = "gambar/1.jpg" id = "myimg"/> </body> </html>Nama penelepon
<! Doctype html> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/</type/title "Text/html; charset = UTF-8"/</title </title> Data dasar dalam data namer var = ['zhang san', 'li si', 'wang er', 'xiao chen', 'xiao zhang']; var i = 0; // nyatakan variabel awal untuk membiarkan orang pertama ditampilkan pada halaman secara default var t1; window.onload = function () {// 02. Dapatkan objek DOM dari tombol start-nama untuk mendaftarkan acara klik untuk objek var dom = document.getElementById ("mybtn"); dom.onClick = function () {// Gunakan fungsi setInterval untuk memanggil fungsi hasil t1 = setInterval (start, 500); // Metode ini hanya memanggil SetTimeout (Stop, 6000); } // Tentukan fungsi anonim untuk menetapkannya ke hasil variabel var start = function () {// 03get Objek tag H1 dan tetapkan nilai ke teks tag h1 var domh = document.geteLementById ("myh1"); domh.innertext = data [i % data.length]; // ganti yang ada, nilai elemen i ++; } // hubungi fungsi anonim start (); var stop = function () {// hapus timer clearInterval (t1); // Siswa yang mengklik kotak prompt muncul dan menjawab peringatan ("tolong" + document.geteLementById ("myh1"). Innertext + "Siswa Jawaban"); }}} </script> </head> <hody> <h1 id = "myh1"> </h1> <tombol id = "mybtn"> Mulai panggil </aton> </body> </html>Melalui kasus -kasus di atas, saya percaya semua orang harus terbiasa dengan dua fungsi ini.
Artikel di atas memiliki pemahaman yang mendalam tentang fungsi setTimeout dan fungsi setInterval. Artikel ini adalah semua konten yang telah saya bagikan dengan Anda. Saya harap ini dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.