Apa itu SetInterval dalam JavaScript dan Bagaimana Cara Berfungsi?

JavaScript digunakan sebagai bahasa pengaturcaraan sisi klien dan juga bahasa pengaturcaraan sisi pelayan. Iamenyediakan banyak kaedah agar beberapa fungsi dapat dilakukan dengan mudah. Inilah yang dibuat salah satu bahasa pengaturcaraan yang paling popular dan juga digunakan secara meluas di beberapa jenis pengembangan produk.SetInterval dalam JavaScript adalah bahagian dari Peristiwa Masa dalam JavaScript dan kami akan mempelajarinya dalam urutan berikut:

• Acara Masa
• SetInterval dalam JavaScript
• Bagaimana Menghentikan Pelaksanaannya?

Acara Masa

JavaScript juga membolehkan pelaksanaan fungsi serta kaedah berkenaan dengan waktu dan bukan masa pelaksanaan program. Ini membolehkan pelaksanaan fungsi pada waktu yang ditentukan tanpa mengira waktu pelaksanaan program.

Dua kaedah utama untuk menggunakan Peristiwa Masa dalam JavaScript adalah:

• setTimeout (fungsi, milisaat)

  
  
  

Fungsi ini melaksanakan fungsi di dalamnya yang dilewatkan sebagai parameter hanya sekali setelah waktu yang ditentukan dalam milisaat.

• setInterval (fungsi, milisaat)

Fungsi ini melaksanakan fungsi dari waktu pelaksanaan dan setelah setiap selang waktu tercapai. Ia mengulangi pelaksanaan fungsi pada setiap selang waktu.

Sekarang mari kita teruskan dan lihat bagaimana SetInterval dalam JavaScript berfungsi.

SetInterval dalam JavaScript

Parameter pertama fungsi ini adalah fungsi yang akan dijalankan dan parameter kedua menunjukkan selang waktu antara setiap pelaksanaan.

apakah perbezaan antara css dan css3

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

Di sini, document.getElementById mendapat elemen dari yang mempunyai id sebagai 'demo' dan fungsi d.toLocaleTimeString () memberikan masa semasa dari sistem.

Oleh itu, ini diulang setiap 1000 milisaat yang bersamaan dengan 1 saat. Oleh itu, fungsi ini berulang kali dilaksanakan setiap 1 saat dan oleh itu masanya dikemas kini setiap saat.

Jadi bagaimana kita menghentikan pelaksanaan ini? Mari kita cari!

Bagaimana Menghentikan Pelaksanaannya?

Kita boleh menghentikan pelaksanaan dari fungsi setInterval () dengan bantuan fungsi lain yang disebut clearInterval ().clearInterval () menggunakan pemboleh ubah yang dikembalikan dari fungsi setInterval ().

Sebagai contoh:

myVar = setInterval (fungsi, milisaat) clearInterval (myVar)

Berikut adalah contoh yang menggunakan kedua setInterval () dan juga ClearInterval (). Ini memulakan jam dan menyediakan butang untuk menghentikan masa.

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

Pengeluaran:

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

Membuat bar kemajuan dinamik

#myProgress {width: 100% height: 30px position: relatif background-color: #ddd} #myBar {background-color: # 4CAF50 lebar: 10px tinggi: 30px kedudukan: mutlak} 
Klik Me function move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) frame function () {if (width == 100) {clearInterval (id)} lain-lain {width ++ elem.style.width = lebar + '%'}}}

Pengeluaran:

Keluaran awal

Keluaran selepas klik pada butang yang bertuliskan 'Klik Saya'.

Beralih antara dua latar belakang

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

Pengeluaran:

Warna akan bertukar antara kuning dan merah jambu. Keluaran di atas adalah sebelum mengklik butang dan yang berikut adalah selepas klik pada butang.

Dengan ini, kita telah sampai ke akhir SetInterval kami dalam artikel JavaScript. Saya harap anda memahami bagaimana kaedah SetInterval berfungsi.

Lihat oleh Edureka. Latihan Pensijilan Pembangunan Web akan membantu anda Mempelajari cara membuat laman web yang mengagumkan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery dan Google API dan menyebarkannya ke Amazon Simple Storage Service (S3).

Ada soalan untuk kami? Sila sebutkan di bahagian komen blog ini dan kami akan menghubungi anda.