Cara menggunakan javascript setinterval

pada artikel ini, kita akan membahas cara menggunakan setInterval() dan setTimeOut() di javascript

javascript memiliki method yaitu setInterval dan setTimeout, dalam penggunaannya hampir sama namun memiliki perbedaan, oleh karena itu kita harus memahami cara menggunakannya

setTimeout()

jendela. setTimeout akan dieksekusi menggunakan milidetik atau 1000 = 1 detik, berikut sintaks umumnya

setTimeout(expression,timeout);

INFO. setTimeout akan mengembalikan timeout id untuk menghentikan timeout kita dapat menggunakan clearTimeout(), clearTimeout() akan dijelaskan di bawah ini

Berikut ini adalah contoh penggunaan setTimeout

_

ketika tombol diklik 5 detik kemudian akan muncul peringatan "yoho".

clearTimeout()

terkadang fungsi clearTimeout ini berguna ketika kita ingin membatalkan dari setTimeout berikut adalah sintaksnya

clearTimeout(timeoutId);

di mana timeoutId adalah pengembalian dari setTimeout() saat metode setTimeout() dipanggil

Berikut adalah contoh yang saya terapkan menggunakan jquery



setInterval

setInterval() adalah metode javascript yang melakukan pekerjaan berulang kali sesuai dengan interval yang ditentukan, berbeda dengan setTimeout() yang langsung melakukan pekerjaan ketika batas waktu telah habis. berikut sintaks dari setInterval()

setInterval(ekspresi, interval);

Contoh kode

setInterval(“lakukan Sesuatu”,5000);

fungsi melakukan Sesuatu(){
// lakukan sesuatu di sini
}

clearInterval

tidak berbeda dengan clearTimeout(), clearInterval() juga digunakan untuk menghapus interval yang sedang berjalan, dengan menggunakan id interval dibawah ini saya beri contoh



script type="text/javascript">
var wooIntervalId= 0;
function wooHandler(){
if($('#buttonWoo').val() == 'Click Me'){
$('#buttonWoo').val('Cukup Nampilnya');
intervalId = setInterval('wooYay()',1000);
}else{
$('#buttonWoo').val('Click Me');
clearInterval(intervalId);
}
}

function wooYay(){
//alert('asf');
if(Math.random() > .5){
$('#woo').html('Woo..');
}else{
$('#woo').html('Yaaay..');
}
setTimeout("$('#woo').html('')",500);
}


_

nah kesimpulannya keempat fungsi diatas adalah built-in dari javascript yang bisa kita gunakan kapan saja, dan keempat fungsi diatas digunakan untuk event yang membutuhkan waktu, untuk setTimeout() dan clearTimeout() digunakan untuk satu event saja sedangkan setInterval() dan clearInterval() digunakan untuk event yang berjalan terus menerus. sekian dari saya. 🙂

Jika fungsi belum dijalankan, Anda dapat menghentikan eksekusi dengan memanggil metode clearTimeout()

Contoh
Contoh yang sama seperti di atas, tetapi dengan penambahan tombol "Stop".





Klik "Coba". Tunggu 3 detik. Halaman ini akan mengingatkan "Halo".

Klik "Berhenti" untuk mencegah fungsi pertama dijalankan.

(Anda harus mengklik "Berhenti" sebelum 3 detik habis.)

metode setInterval()

Metode setInterval() mengulangi fungsi yang diberikan pada setiap interval waktu yang ditentukan

jendela. setInterval(fungsi, milidetik);

Metode jendela. setInterval() dapat ditulis tanpa awalan jendela

Parameter pertama adalah fungsi yang akan dijalankan

Parameter kedua menunjukkan lamanya interval waktu antara setiap eksekusi

Contoh ini menjalankan fungsi yang disebut "myTimer" setiap detik sekali (seperti jam tangan digital).

Halo sobat Dumet School. Kembali lagi bersama saya Shelli Ripati di Web Design Course. Kali ini saya akan membahas cara membuat Interval Set Animation pada Javascript Click Event. Pada javascript terdapat dua metode untuk timing event yaitu set interval dan set timeout. Set interval atau set timeout adalah metode yang memanggil fungsi atau mengevaluasi ekspresi pada interval tertentu dalam milidetik. Metode setInterval akan terus memanggil fungsi hingga clearInterval dipanggil, atau jendela ditutup. Sedangkan metode set timeout menjalankan fungsi hanya sekali, setelah beberapa milidetik

Dan kali ini kita akan menggunakan metode set interval. Yang pertama untuk Membuat Animasi Interval Set Pada Javascript Klik Event sobat harus membuat struktur htmlnya seperti pada script di bawah ini. Teman-teman bisa langsung saya copy source codenya di bawah ini

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<. DOCTYPE html>

<html lang = "en">

<kepala>

  <meta set karakter = "UTF-8">

  <judul> Pembuatan Animasi Atur Interval Aktif Acara Click Javascript< / judul>

  <tautan rel = "stylesheet" href = "bootstrap. min. css">

  

< / kepala>

<tubuh>

 

  <h3 kelas = "display-4" id = "judul" >Waktu Acara< / h3>

  <p id = "subTitle"> Membuat Animasi Set Interval Pada Acara Klik Javascript< / p>

  <div kelas = "box bg-warning">< / div >

  <div kelas = "box bg-danger">< / div >

  <div kelas = "box bg-info">< / div >

< / tubuh>

< / html>

Jika Anda melihat kode sumber di atas, Anda dapat melihat bahwa saya menggunakan bootstrap untuk membuat struktur html. Nah sobat bisa download atau masukin link bootstrap di tag head. Jika kita sudah memasukkan javascript. Dan ini skripnya, teman-teman

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

  var kotak = dokumen.querySelectorAll('. kotak');

    kotak. forEach(fungsi(div ) {

      div. addEventListener('klik', perbesar);

    });

    fungsi memperbesar(e) {

      var divbox = e.target;

      var interval;

      var besar = 50;

      

      interval = setInterval(function() {

        besar += 1;

        

        jika(besar >= 200) {

           besar = 200;

          clearInterval(interval);

        }

        

        divbox. gaya. tinggi = besar + ' px';

        divbox. gaya. lebar = besar + ' px';

      }, 15. 000);

    }

  

Sobat bisa melihat source code di atas, dimana saat melakukan event click pada div yang memiliki class circle, interval set akan dijalankan dengan menambah lebar dan tinggi div menjadi 200px. Dan jika 200px maka nilai variabel interval yang dikembalikan oleh setInterval digunakan sebagai parameter untuk metode clearInterval

Itulah artikel cara membuat Interval Set Animation pada Javascript Click Event. Semoga bermanfaat dan selamat mencoba teman-teman

Apa itu Javascript SetInterval?

SetInterval() digunakan untuk mengeksekusi kode beberapa kali (berulang kali) . Setinterval() mengambil fungsi yang akan berjalan berkali-kali tak terbatas dengan waktu tunda milidetik sebagai argumen kedua.

Apa fungsi SetInterval?

SetInterval digunakan untuk memanggil fungsi setiap beberapa milidetik. SetInterval akan mengulangi satu atau sekelompok pernyataan dalam skrip terus menerus selama halaman terbuka.

Javascript setTimeout untuk apa?

setTimeout memungkinkan kita menjalankan fungsi setelah selang waktu tertentu . setInterval memungkinkan kita untuk menjalankan fungsi berulang kali, dimulai dengan interval yang ditetapkan dari waktu yang diberikan, kemudian akan terus berulang pada interval waktu yang diberikan.