Timer - JavaScript - TheLazy.Dev

JavaScript mermiliki 2 buah fungsi timer yaitu setTimeout dan setInterval. setTimeout hanya dieksekusi 1 kali selama rentang waktu yang ditentukan, sedangkan setInterval dieksekusi berkali-kali selama rentang waktu yang ditentukan.

setTimeout

setTimeout(function () {
  console.log('Hello');
}, 5000); // interval waktu dalam milidetik untuk mengeksekusi fungsi
console.log('Waitng...'); // kode ini akan ditampilkan lebih dahulu

Argumen fungsi pada setTimeout juga bisa diisi.

setTimeout(
  function (par1, par2) {
    console.log(`Here is ${par1} and ${par2}`);
  }, 1000, 'hammer', 'nail');

Membatalkan setTimeout dengan clearTimeout. clearTimeout membutuhkan argumen yaitu setTimeout yang akan dibatalkan, oleh karenanya dalam penggunaan clearTimeout, setTimeout harus disimpan dalam sebuah variabel.

const tool = function () {
  setTimeout((par1, par2) => console.log(`The tools: ${par1} and ${par2}`), 5000, ...par); // kode ini akan disimpan dalam register dan menunggu 5 detik untuk diekseskusi
};

const par = ['jigsaw', 'welder'];
tool();
console.log('Waiting...');
if (par.includes('jigsaw')) {
  clearTimeout(tool);
  console.log('setTimeout telah dibatalkan');
}

setInterval

setInterval(function () {
  const now = new Date();
  console.log(now.getSeconds()); // menampilkan nilai detik dari date
}, 1000); // dieksekusi setiap 1000 milidetik (1 detik)

setIntervaldengan parameter

setInterval(
  function (par1, par2) {
    const now = new Date();
    console.log(`${par1} dan ${par2}`, now.getSeconds());
  }, 1000,'hammer', 'jigsaw');

Membuat Timer dan Counter
Kita akan membuat sebuah aplikasi timer dan counter dengan memanfaatkan setIntervaldan clearInterval. Sebelumnya buatlah file html sederhana dengan 2 buah tombol. Saya membuatnya secara online dengan JSFiddle.

Timer

const btnStart = document.querySelector('.btnStart');
const btnStop = document.querySelector('.btnStop');
const text = document.querySelector('.text');

let startTimer; // variabel panampung setInterval harus berada pada global window object

btnStart.addEventListener('click', function () {
  startTimer = setInterval(function () {
    const now = new Date();
    text.textContent = `${now.getMinutes()}:${now.getSeconds()}`;
    console.log(`${now.getMinutes()}:${now.getSeconds()}`);
  }, 1000);
});

btnStop.addEventListener('click', function () {
  clearInterval(startTimer); // membersihkan variabel startTimer
  text.textContent = 'Timer Stop';
  console.log('Timer Stop');
});

Counter

const btnStart = document.querySelector('.btnStart');
const btnStop = document.querySelector('.btnStop');
const text = document.querySelector('.text');

let startTimer;
btnStart.addEventListener('click', function () {
  let time1 = 10;
  startTimer = setInterval(function () {
    text.textContent = `${time1}`;
    console.log(time1);
    if (time1 === 0) {
      clearInterval(startTimer);
      text.textContent = 'Timer Stop';
    }
    time1--;
  }, 1000);
});

btnStop.addEventListener('click', function () {
  clearInterval(startTimer);
  text.textContent = 'Timer Stop';
});

Note: video terakhir yang saya upload hasilnya kurang sempurna, silahkan dicoba sendiri kodenya

Blog

Timer - JavaScript

boibolang

Join Our Newsletter. No Spam, Only the good stuff.

Related