Reset Timer Setinterval Javascript

Reset Timer Setinterval Javascript

4 min read Jun 20, 2024
Reset Timer Setinterval Javascript

Cara Reset Timer setInterval di JavaScript

setInterval adalah fungsi built-in JavaScript yang memungkinkan kita untuk menjalankan fungsi tertentu secara berkala pada interval waktu yang ditentukan. Namun, terkadang kita perlu untuk menghentikan dan mereset timer ini.

Berikut beberapa cara untuk mereset timer setInterval di JavaScript:

1. Menggunakan clearInterval

Cara paling umum untuk mereset timer setInterval adalah dengan menggunakan fungsi clearInterval. Fungsi ini menerima ID interval yang ingin kita hentikan.

// Menjalankan fungsi "myFunction" setiap 1 detik
let intervalId = setInterval(myFunction, 1000); 

// Menghentikan interval setelah 5 detik
setTimeout(() => {
  clearInterval(intervalId);
}, 5000);

// Fungsi yang dijalankan setiap detik
function myFunction() {
  console.log("Hello World!");
}

Kode di atas pertama-tama mendefinisikan fungsi myFunction yang akan dijalankan setiap detik menggunakan setInterval. Kemudian, kita mendeklarasikan sebuah variabel intervalId untuk menyimpan ID interval yang dihasilkan. Selanjutnya, kita menggunakan setTimeout untuk menghentikan interval setelah 5 detik menggunakan clearInterval dan ID interval yang tersimpan di variabel intervalId.

2. Menjalankan Fungsi setInterval Ulang

Cara kedua adalah dengan menjalankan fungsi setInterval ulang dengan parameter baru. Ini akan menghasilkan ID interval baru dan menghentikan interval yang lama.

let intervalId = setInterval(myFunction, 1000);

// Reset interval setelah 5 detik
setTimeout(() => {
  intervalId = setInterval(myFunction, 2000); // Ubah interval menjadi 2 detik
}, 5000);

// Fungsi yang dijalankan setiap detik
function myFunction() {
  console.log("Hello World!");
}

Kode di atas menjalankan fungsi myFunction setiap 1 detik, kemudian setelah 5 detik, kita memanggil setInterval lagi dengan interval 2 detik. Interval lama akan berhenti secara otomatis dan digantikan oleh interval baru dengan ID interval baru.

3. Mengatur Variabel Flag

Cara ketiga adalah dengan menggunakan variabel flag untuk menandai apakah timer sedang aktif atau tidak.

let isRunning = false;
let intervalId;

// Menjalankan fungsi "myFunction" jika timer aktif
function myFunction() {
  if (isRunning) {
    console.log("Hello World!");
  }
}

// Menjalankan timer
function startTimer() {
  isRunning = true;
  intervalId = setInterval(myFunction, 1000);
}

// Menghentikan timer
function stopTimer() {
  isRunning = false;
  clearInterval(intervalId);
}

// Menjalankan timer
startTimer();

// Menghentikan timer setelah 5 detik
setTimeout(stopTimer, 5000);

Kode di atas menggunakan variabel isRunning untuk menandai apakah timer sedang aktif. Fungsi myFunction hanya akan dijalankan jika isRunning bernilai true. Fungsi startTimer dan stopTimer bertanggung jawab untuk mengatur nilai isRunning dan menjalankan/menghentikan setInterval.

Kesimpulan

Ada berbagai cara untuk mereset timer setInterval di JavaScript. Anda dapat memilih cara yang paling sesuai dengan kebutuhan proyek Anda.