DEV Community

Cover image for Timer - JavaScript
boibolang
boibolang

Posted on

Timer - JavaScript

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
Enter fullscreen mode Exit fullscreen mode

result

Argumen fungsi pada setTimeout juga bisa diisi.

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

result

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');
}
Enter fullscreen mode Exit fullscreen mode

setInterval

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

result
setIntervaldengan parameter

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

result

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');
});
Enter fullscreen mode Exit fullscreen mode

result
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';
});
Enter fullscreen mode Exit fullscreen mode

result

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

Top comments (0)