Timer - JavaScript
Published: 2024-02-11 03:49:06

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**

```javascript
setTimeout(function () {
  console.log('Hello');
}, 5000); // interval waktu dalam milidetik untuk mengeksekusi fungsi
console.log('Waitng...'); // kode ini akan ditampilkan lebih dahulu
```
![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gx5n23euztujvhjkjp8.gif)

Argumen fungsi pada `setTimeout` juga bisa diisi.

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

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxufrhc6oro6mg5ffwfu.gif)

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

```javascript
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**

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

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2d0ibogwabihb53uorkc.gif)
`setInterval`dengan parameter

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

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/agonczuk9j0n6xfaqn8p.gif)

**Membuat Timer dan Counter**
Kita akan membuat sebuah aplikasi timer dan counter dengan memanfaatkan `setInterval`dan `clearInterval`. Sebelumnya buatlah file html sederhana dengan 2 buah tombol. Saya membuatnya secara online dengan [JSFiddle](https://jsfiddle.net/).

**Timer**

```javascript
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');
});
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7w5140r1znoczdubu1r4.gif)
**Counter**

```javascript
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';
});
```

![result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kz0ysnf3qsgbwbw58bol.gif)

_Note: video terakhir yang saya upload hasilnya kurang sempurna, silahkan dicoba sendiri kodenya_