img-news
Programming
Reset setTimeout Timer dengan JS
Oleh Administrator 31 Agustus 2022

Terkadang kita ingin me-reset setTimeout dan bisa kita gunakan lagi. Ini kasusnya waktu saya ingin menampilkan alert yang didalam alert tersebut ada tombol batalnya. Dan ketika mengklik tombol batal tersebut saya ingin alert itu mengulang fungsi setTimeout yang sudah berjalan.

Setelah tanya mbah google akhirnya saya dapat jawaban, walau butuh penyempurnaan tapi code ini sudah mendekati apa yang saya inginkan.

 

  • Pertama kita harus membuat fungsi setTimeoutnya.
let timer;

const runTimer = () => {
  timer = window.setTimeout(
    () => {
       $('.site-mask').removeClass('site-mask-show');
       $('.alert').removeClass('alert-show');
     }, 2000);
}

Fungsi $('.site-mask').removeClass('site-mask-show'); digunakan untuk menghilangkan background hitam setelah 2 detik

Fungsi $('.alert').removeClass('alert-show'); digunakan untuk menghilangkan alert setelah 2 detik

  • Setelah itu pada tombol batal, masukan code
$('.btn-alert').click(function(){
  $('#alert-like-content').addClass('alert-show');
  $('.site-mask').addClass('site-mask-show');

  clearTimeout(timer)
  runTimer()
});

Fungsi clearTimeout(timer) akan me-reset timer dan menghitung ulang dari 0 milliseconds lagi

Semoga bermanfaat..