Apa itu SetInterval di JavaScript dan Bagaimana Cara Kerjanya?

JavaScript digunakan sebagai bahasa pemrograman sisi klien serta bahasa pemrograman sisi server. Saya tmenyediakan sejumlah besar metode untuk beberapa fungsi yang akan dilakukan dengan mudah. Inilah yang dibuat salah satu bahasa pemrograman yang paling populer serta juga digunakan secara luas di beberapa jenis pengembangan produk.SetInterval di JavaScript adalah bagian dari Timing Events di JavaScript dan kita akan mempelajarinya dalam urutan berikut:

• Acara Waktu
• SetInterval di JavaScript
• Bagaimana Cara Menghentikan Eksekusi?

Acara Waktu

JavaScript juga memungkinkan eksekusi fungsi serta metode yang berkaitan dengan waktu dan bukan waktu eksekusi program. Hal ini memungkinkan eksekusi fungsi pada waktu yang ditentukan terlepas dari waktu pelaksanaan program.

Dua metode utama untuk menggunakan Timing Events di JavaScript adalah:

• setTimeout (fungsi, milidetik)

  
  
  

Fungsi ini menjalankan fungsi di dalamnya yang diteruskan sebagai parameter hanya sekali setelah waktu yang ditentukan dalam milidetik.

• setInterval (fungsi, milidetik)

Fungsi ini menjalankan fungsi dari waktu eksekusi dan setelah setiap interval waktu tercapai. Ini mengulangi eksekusi fungsi di setiap interval waktu.

menu drop down di angularjs

Sekarang mari kita lanjutkan dan lihat cara kerja SetInterval di JavaScript.

SetInterval di JavaScript

Parameter pertama dari fungsi ini adalah fungsi yang akan dijalankan dan parameter kedua menunjukkan interval waktu antara setiap eksekusi.

var myVar = setInterval (myTimer, 1000) fungsi myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Di sini, document.getElementById mendapatkan elemen dari yang memiliki id sebagai 'demo' dan fungsi d.toLocaleTimeString () memberikan waktu saat ini dari sistem.

Karenanya, ini diulangi setiap 1000 milidetik yang setara dengan 1 detik. Dengan demikian, fungsi tersebut berulang kali dijalankan setiap 1 detik dan karenanya waktu diperbarui setiap detik.

Jadi bagaimana kita menghentikan eksekusi ini? Ayo cari tahu!

Bagaimana Cara Menghentikan Eksekusi?

Kita bisa menghentikan eksekusi dari fungsi setInterval () dengan bantuan fungsi lain yang disebut clearInterval ().clearInterval () menggunakan variabel yang dikembalikan dari fungsi setInterval ().

Sebagai contoh:

myVar = setInterval (function, milidetik) clearInterval (myVar)

Di bawah ini adalah contoh yang menggunakan setInterval () serta clearInterval (). Ini memulai jam dan menyediakan tombol untuk menghentikan waktu.

 
Di bawah ini adalah jam.
Hentikan waktu 
 
Klik tombol di atas untuk menghentikan waktu.
var myVar = setInterval (myTimer, 1000) fungsi myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Keluaran:

Beberapa contoh lagi dengan setInterval () dan clearInterval ().

Membuat bilah kemajuan dinamis

#myProgress {width: 100% height: 30px position: relative background-color: #ddd} #myBar {background-color: # 4CAF50 width: 10px height: 30px position: absolute} 
Klik Saya function move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {width ++ elem.style.width = width + '%'}}}

Keluaran:

Output awal

Output setelah klik pada tombol yang bertuliskan 'Click Me'.

Beralih di antara dua latar belakang

Berhenti Beralih var myVar = setInterval (setColor, 300) fungsi setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'kuning'? 'pink': 'yellow'} fungsi stopColor () {clearInterval (myVar)}

Keluaran:

Warnanya akan berubah antara kuning dan merah muda. Output di atas adalah sebelum mengklik tombol dan di bawah ini adalah setelah mengklik tombol.

Dengan ini, kita sampai pada akhir artikel SetInterval kita di JavaScript. Saya harap Anda memahami cara kerja metode SetInterval.

Lihat oleh Edureka. Pelatihan Sertifikasi Pengembangan Web akan membantu Anda Mempelajari cara membuat situs web yang mengesankan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery, dan Google API, serta menerapkannya ke Amazon Simple Storage Service (S3).

Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar blog ini dan kami akan menghubungi Anda kembali.