Selamat datang di tutorial tentang cara menjalankan Javascript setiap detik. Jadi, Anda ingin mengulang sepotong kode tanpa henti dan menjalankannya setiap detik (atau setiap X detik)?
Cara termudah untuk menjalankan Javascript setiap detik adalah dengan menggunakan fungsi setInterval(). Sebagai contoh
- function foo () { console.log("RUNNING"); }_
- setInterval(foo, 1000);
Itu mencakup dasar-dasar cepat, tetapi mari kita telusuri beberapa contoh aktual dalam panduan ini. Baca terus
ⓘ Saya telah menyertakan file zip dengan semua kode sumber contoh di awal tutorial ini, jadi Anda tidak perlu menyalin-tempel semuanya… Atau jika Anda hanya ingin langsung masuk
TLDR – SLIDE CEPAT
Unduh & Catatan
UNDUH & CATATAN
Pertama, berikut adalah tautan unduhan ke kode contoh seperti yang dijanjikan
CATATAN CEPAT
Jika Anda menemukan bug, jangan ragu untuk berkomentar di bawah ini. Saya mencoba menjawab pertanyaan singkat juga, tetapi itu adalah satu orang versus seluruh dunia… Jika Anda sangat membutuhkan jawaban, silakan periksa daftar situs web saya untuk mendapatkan bantuan dalam pemrograman
DOWNLOAD KODE CONTOH
Klik di sini untuk mengunduh kode sumber, saya telah merilisnya di bawah lisensi MIT, jadi silakan membangun di atasnya atau menggunakannya dalam proyek Anda sendiri
JALANKAN JAVASCRIPT SETIAP DETIK
Baiklah, mari kita mulai dengan contoh tentang cara mengulang Javascript setiap detik
METODE 1) WAKTU INTERVAL
1-set-interval. html
<!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML var showTime = () => { let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; }; // (C) START INTERVAL var timer = setInterval(showTime, 1000); // TO STOP - clearInterval(timer); </script>Seperti pada cuplikan pendahuluan
- (B) Mulailah dengan membuat fungsi yang ingin Anda jalankan setiap detik. Dalam contoh ini, itu adalah showTime()
- (C) Gunakan setInterval(FUNCTION, DELAY)_ untuk membuat penghitung waktu interval. Ini akan mengaktifkan FUNCTION yang diberikan untuk setiap DELAY mikrodetik. Saya. E. 1000 ms sama dengan 1 detik
METODE 2) FUNGSI REKURSIF
2-rekursif. html
<!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML var showTime = () => { // (B1) UPDATE HTML let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; // (B2) LOOP timer = setTimeout(showTime, 1000); }; // (C) START! var timer = setTimeout(showTime, 0); // TO STOP - clearTimeout(timer); </script>_Trik sederhana lain yang kami gunakan. Perhatikan (B2), fungsi mengatur dirinya sendiri pada batas waktu 1 detik dan memanggil dirinya sendiri secara rekursif
METODE 3) LOOP INFINITE
3-async-loop. html
<!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN EVERY SECOND TO UPDATE TIME var showTime = async () => { while (true) { // (B1) UPDATE CURRENT TIME let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; // (B2) WAIT FOR 1 SECOND await new Promise(resolve => setTimeout(resolve, 1000)); }}; // (C) START! showTime(); </script>Terakhir, ini adalah "solusi modern" yang funky
- (B) Ide dasarnya adalah membuat loop <!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML var showTime = () => { // (B1) UPDATE HTML let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; // (B2) LOOP timer = setTimeout(showTime, 1000); }; // (C) START! var timer = setTimeout(showTime, 0); // TO STOP - clearTimeout(timer); </script>0 tanpa akhir. Namun karena ini akan memblokir dan “menggantung” seluruh halaman, ini hanya dapat dilakukan dalam <!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML var showTime = () => { // (B1) UPDATE HTML let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; // (B2) LOOP timer = setTimeout(showTime, 1000); }; // (C) START! var timer = setTimeout(showTime, 0); // TO STOP - clearTimeout(timer); </script>1
- (B2) Di akhir setiap siklus, kami melakukan <!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML var showTime = () => { // (B1) UPDATE HTML let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; // (B2) LOOP timer = setTimeout(showTime, 1000); }; // (C) START! var timer = setTimeout(showTime, 0); // TO STOP - clearTimeout(timer); </script>2. Ini agak membingungkan, tetapi pada dasarnya menunggu selama 1 detik sebelum mengulang sendiri
BIT & LINK EKSTRA
Itu saja untuk tutorial ini, dan ini adalah bagian kecil tentang beberapa tambahan dan tautan yang mungkin berguna bagi Anda
MANA YANG LEBIH BAIK?
Secara pribadi, saya lebih suka setInterval(). Ini adalah metode paling tradisional dan paling mudah dipahami. Sementara beberapa orang mungkin berpendapat bahwa <!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML var showTime = () => { // (B1) UPDATE HTML let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; // (B2) LOOP timer = setTimeout(showTime, 1000); }; // (C) START! var timer = setTimeout(showTime, 0); // TO STOP - clearTimeout(timer); </script>4 yang tak terbatas bekerja lebih baik, karena berjalan secara paralel - saya akan mengatakan, berikan saja <!-- (A) CURRENT TIME WILL BE SHOWN HERE --> <div id="timeNow"></div> <script> // (B) RUN THIS FUNCTION EVERY SECOND TO UPDATE HTML var showTime = () => { // (B1) UPDATE HTML let now = new Date(), hr = now.getHours(), min = now.getMinutes(), sec = now.getSeconds(); document.getElementById("timeNow").innerHTML = `${hr}:${min}:${sec}`; // (B2) LOOP timer = setTimeout(showTime, 1000); }; // (C) START! var timer = setTimeout(showTime, 0); // TO STOP - clearTimeout(timer); </script>5 ke setInterval() kemudian. 🙄
LINK dan REFERENSI
- Setel interval pada MDN
- Tetapkan batas waktu pada MDN
- Fungsi asinkron
- Tunggu di MDN
LEMBAR CHEAT INFOGRAFIS
Terima kasih telah membaca, dan kami telah sampai di akhir panduan ini. Saya harap ini membantu Anda dengan proyek Anda, dan jika Anda ingin berbagi apa pun dengan panduan ini, jangan ragu untuk berkomentar di bawah ini. Semoga berhasil dan selamat membuat kode