Berhenti mengatur panggilan Interval dalam JavaScript


1399

Saya menggunakan setInterval(fname, 10000);untuk memanggil fungsi setiap 10 detik dalam JavaScript. Apakah mungkin untuk berhenti memanggilnya di beberapa acara?

Saya ingin pengguna dapat menghentikan penyegaran data yang diulang.

Jawaban:


2160

setInterval()mengembalikan ID interval, yang dapat Anda sampaikan ke clearInterval():

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Lihat dokumen untuk setInterval()dan clearInterval().


42
Bagaimana Anda bisa memulainya lagi setelah berhenti dengan 'clearInterval ()'? Jika saya mencoba untuk me-restart itu saya mendapatkan 2x setInterval berjalan.
Dan

8
Saya juga Setiap kali saya ingin menggunakan SetInterval (MyFunction, 4000); itu semakin cepat dan lebih cepat, setiap kali 2x kali lebih cepat :( bagaimana saya bisa memulai kembali setinterval ??
Alireza Masali

14
SetInterval () tidak mengubah kecepatan yang Anda lewati. Jika apa pun yang dilakukannya mempercepat setiap kali Anda memanggil SetInterval (), maka Anda memiliki beberapa timer yang berjalan pada waktu yang sama, dan akan membuka pertanyaan baru.
EpicVoyage

29
Pastikan Anda benar-benar menghentikannya. Karena pelingkupan variabel, Anda mungkin tidak memiliki Id untuk menelepon clearInterval. Saya telah menggunakan window.refreshIntervalIdalih-alih variabel lokal, dan itu berfungsi dengan baik!
Osa

2
Saya sudah mulai melampirkan pegangan setInterval ke elemen terkait (bila relevan): $('foo').data('interval', setInterval(fn, 100));dan kemudian membersihkannya dengan clearInterval($('foo').data('interval'));saya yakin ada cara non-jQuery untuk melakukannya juga.
Michael - Di mana Clay Shirky

105

Jika Anda menetapkan nilai kembali setIntervalke variabel, Anda bisa menggunakannya clearIntervaluntuk menghentikannya.

var myTimer = setInterval(...);
clearInterval(myTimer);

Saya tidak melihat perbedaan antara ini dan jawaban John
Bobtroopo

51

Anda dapat mengatur variabel baru dan menambahkannya dengan ++ (hitung satu) setiap kali berjalan, maka saya menggunakan pernyataan kondisional untuk mengakhirinya:

var intervalId = null;
var varCounter = 0;
var varName = function(){
     if(varCounter <= 10) {
          varCounter++;
          /* your code goes here */
     } else {
          clearInterval(intervalId);
     }
};

$(document).ready(function(){
     intervalId = setInterval(varName, 10000);
});

Saya harap ini membantu dan itu benar.


3
Saya terkejut mengetahui bahwa ini berhasil clearInterval(varName);. Saya berharap clearIntervaltidak berfungsi ketika melewati nama fungsi, saya pikir itu memerlukan ID interval. Saya kira ini hanya dapat berfungsi jika Anda memiliki fungsi bernama, karena Anda tidak dapat melewatkan fungsi anonim sebagai variabel di dalam dirinya sendiri.
Patrick M

31
Sebenarnya saya pikir itu tidak berhasil. Kode berhenti dieksekusi karena pembatasan pada penghitung, tetapi interval tetap menembakkan varName (). Cobalah mencatat apa pun setelah clearInterval () (di dalam klausa lain) dan Anda akan melihatnya ditulis selamanya.
Rafael Oliveira

5
Begitu banyak upvotes untuk sesuatu yang tidak berfungsi, kadang-kadang saya tidak mengerti orang-orang di SO: P
Stranded Kid

2
$(document).ready(function(){ });adalah jQuery, itu sebabnya tidak bekerja. Ini seharusnya sudah disebutkan setidaknya.
paddotk

4
@OMGrant, Selain contoh yang tidak berfungsi, Anda memiliki variabel bernama varName, yang menyimpan fungsi yang tidak disebutkan namanya - wha ?? Anda harus mengubah atau mencatat jawaban ini, IMHO.
Dean Radcliffe

13

Jawaban di atas telah menjelaskan bagaimana setInterval mengembalikan pegangan, dan bagaimana pegangan ini digunakan untuk membatalkan pengatur waktu Interval.

Beberapa pertimbangan arsitektur:

Tolong jangan gunakan variabel "lingkup-kurang". Cara teraman adalah dengan menggunakan atribut objek DOM. Tempat termudah adalah "dokumen". Jika penyegaran dimulai dengan tombol start / stop, Anda dapat menggunakan tombol itu sendiri:

<a onclick="start(this);">Start</a>

<script>
function start(d){
    if (d.interval){
        clearInterval(d.interval);
        d.innerHTML='Start';
    } else {
        d.interval=setInterval(function(){
          //refresh here
        },10000);
        d.innerHTML='Stop';
    }
}
</script>

Karena fungsi didefinisikan di dalam handler klik tombol, Anda tidak perlu mendefinisikannya lagi. Penghitung waktu dapat dilanjutkan jika tombol diklik lagi.


1
Apa yang lebih baik tentang menempatkan pada documentdari pada window?
icktoofay

1
koreksi. Saya bermaksud mengatakan dokumen. Semuanya. Dalam contoh kode saya, saya secara efektif menggunakan tombol itu sendiri. Tidak ada ID untuk tombol, tetapi pointer "ini" terikat ke parameter "d" dalam fungsi. Menggunakan "jendela" sebagai ruang lingkup berisiko karena fungsinya juga ada. Misalnya, "tes fungsi () {}" dapat diakses melalui window.test, yang sama dengan tidak menggunakan cakupan sama sekali, karena ini adalah singkatan. Semoga ini membantu.
Schien

1
jangan kehilangan variabel "lingkup-kurang" -> jangan gunakan "lingkup-kurang" Saya akan mengeditnya, tetapi perubahannya kurang dari 6 huruf, dan kesalahannya membingungkan.
Leif Neland

2
Anda tidak perlu DOM untuk itu. Hanya kami IIFE untuk menghindari polusi ruang lingkup global.
Onur Yıldırım

1
Saya harus menambahkan 'd.interval = tidak terdefinisi' setelah innerhtml = 'mulai' untuk membuatnya berfungsi lagi. Karena seperti itu hanya berfungsi satu kali.
jocmtb

11

Sudah dijawab ... Tetapi jika Anda memerlukan pengatur waktu yang dapat digunakan dan digunakan kembali yang juga mendukung banyak tugas pada interval yang berbeda, Anda dapat menggunakan TaskTimer saya (untuk Node dan browser).

// Timer with 1000ms (1 second) base interval resolution.
const timer = new TaskTimer(1000);

// Add task(s) based on tick intervals.
timer.add({
    id: 'job1',         // unique id of the task
    tickInterval: 5,    // run every 5 ticks (5 x interval = 5000 ms)
    totalRuns: 10,      // run 10 times only. (omit for unlimited times)
    callback(task) {
        // code to be executed on each run
        console.log(task.name + ' task has run ' + task.currentRuns + ' times.');
        // stop the timer anytime you like
        if (someCondition()) timer.stop();
        // or simply remove this task if you have others
        if (someCondition()) timer.remove(task.id);
    }
});

// Start the timer
timer.start();

Dalam kasus Anda, saat pengguna mengeklik untuk mengganggu penyegaran data; Anda juga dapat menelepon timer.pause()kemudian timer.resume()jika mereka perlu mengaktifkan kembali.

Lihat lebih lanjut di sini .


6

Metode clearInterval () dapat digunakan untuk menghapus set timer dengan metode setInterval ().

setInterval selalu mengembalikan nilai ID. Nilai ini dapat diteruskan dalam clearInterval () untuk menghentikan timer. Berikut adalah contoh timer mulai dari 30 dan berhenti ketika menjadi 0.

  let time = 30;
  const timeValue = setInterval((interval) => {
  time = this.time - 1;
  if (time <= 0) {
    clearInterval(timeValue);
  }
}, 1000);

5

@ cnu,

Anda dapat menghentikan interval, ketika mencoba menjalankan kode sebelum melihat browser konsol Anda (F12) ... coba komentar clearInterval (trigger) adalah melihat lagi konsol, bukan mempercantik? : P

Lihat contoh sumber:

var trigger = setInterval(function() { 
  if (document.getElementById('sandroalvares') != null) {
    document.write('<div id="sandroalvares" style="background: yellow; width:200px;">SandroAlvares</div>');
    clearInterval(trigger);
    console.log('Success');
  } else {
    console.log('Trigger!!');
  }
}, 1000);
<div id="sandroalvares" style="background: gold; width:200px;">Author</div>


3

Deklarasikan variabel untuk menetapkan nilai yang dikembalikan dari setInterval (...) dan meneruskan variabel yang ditugaskan ke clearInterval ();

misalnya

var timer, intervalInSec = 2;

timer = setInterval(func, intervalInSec*1000, 30 ); // third parameter is argument to called function 'func'

function func(param){
   console.log(param);
}

// Di mana saja Anda memiliki akses ke timer yang dinyatakan di atas panggilan clearInterval

$('.htmlelement').click( function(){  // any event you want

       clearInterval(timer);// Stops or does the work
});

1
var keepGoing = true;
setInterval(function () {
     if (keepGoing) {
        //DO YOUR STUFF HERE            
        console.log(i);
     }
     //YOU CAN CHANGE 'keepGoing' HERE
  }, 500);

Anda juga dapat menghentikan interval dengan menambahkan pendengar acara untuk mengatakan tombol dengan ID "interval berhenti":

$('buuton#stop-interval').click(function(){
   keepGoing = false;
});

HTML:

<button id="stop-interval">Stop Interval</button>

Catatan: Interval masih akan dieksekusi, tidak ada yang akan terjadi.


2
Ini benar-benar kembali untuk kinerja, dan untuk tab latar belakang, itu akan benar-benar memperlambat banyak penghitung waktu lain karena penghitung waktu dan interval
dipercepat

1

Ini adalah bagaimana saya menggunakan metode clearInterval () untuk menghentikan timer setelah 10 detik.

function startCountDown() {
  var countdownNumberEl = document.getElementById('countdown-number');
  var countdown = 10;
  const interval = setInterval(() => {
    countdown = --countdown <= 0 ? 10 : countdown;
    countdownNumberEl.textContent = countdown;
    if (countdown == 1) {
      clearInterval(interval);
    }
  }, 1000)
}
<head>
  <body>
    <button id="countdown-number" onclick="startCountDown();">Show Time </button>
  </body>
</head>


1

Gunakan setTimeOut untuk menghentikan interval setelah beberapa waktu.

var interVal = setInterval(function(){console.log("Running")  }, 1000);
 setTimeout(function (argument) {
    clearInterval(interVal);
 },10000);

0

Saya kira kode berikut akan membantu:

var refreshIntervalId = setInterval(fname, 10000);

clearInterval(refreshIntervalId);

Anda melakukan kode 100% benar ... Jadi ... Apa masalahnya? Atau ini tutorial ...


-3

Mengapa tidak menggunakan pendekatan yang lebih sederhana? Tambahkan kelas!

Cukup tambahkan kelas yang memberi tahu interval untuk tidak melakukan apa pun. Misalnya: di hover.

var i = 0;
this.setInterval(function() {
  if(!$('#counter').hasClass('pauseInterval')) { //only run if it hasn't got this class 'pauseInterval'
    console.log('Counting...');
    $('#counter').html(i++); //just for explaining and showing
  } else {
    console.log('Stopped counting');
  }
}, 500);

/* In this example, I'm adding a class on mouseover and remove it again on mouseleave. You can of course do pretty much whatever you like */
$('#counter').hover(function() { //mouse enter
    $(this).addClass('pauseInterval');
  },function() { //mouse leave
    $(this).removeClass('pauseInterval');
  }
);

/* Other example */
$('#pauseInterval').click(function() {
  $('#counter').toggleClass('pauseInterval');
});
body {
  background-color: #eee;
  font-family: Calibri, Arial, sans-serif;
}
#counter {
  width: 50%;
  background: #ddd;
  border: 2px solid #009afd;
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  transition: .3s;
  margin: 0 auto;
}
#counter.pauseInterval {
  border-color: red;  
}
<!-- you'll need jQuery for this. If you really want a vanilla version, ask -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<p id="counter">&nbsp;</p>
<button id="pauseInterval">Pause</button></p>

Saya telah mencari pendekatan cepat dan mudah ini sejak lama, jadi saya memposting beberapa versi untuk memperkenalkan sebanyak mungkin orang.


17
Sepertinya tidak terlalu sederhana bagi saya ... Saya juga berpikir lebih baik untuk menghapus interval Anda daripada menjaga panggilan ke fungsi yang tidak melakukan apa-apa.
Romain Braun

Saya tidak setuju. this.setInterval(function() { if(!$('#counter').hasClass('pauseInterval')) { //do something } }, 500);adalah semua yang Anda miliki untuk kode. Selain itu, cek adalah hal pertama yang Anda lakukan, jadi sangat ringan ketika sedang melayang. Untuk itulah fungsi ini: untuk sementara menjeda suatu fungsi . Jika Anda ingin menghentikannya tanpa batas: tentu saja Anda menghapus interval.
Aart den Braber

Jumlah ini untuk pemungutan suara dan umumnya tidak disarankan. Ini akan membangunkan CPU dari kondisi daya rendah hanya untuk melakukan (kemungkinan) pemeriksaan tidak berguna. Itu juga menunda umpan balik dari langsung ke antara 0 dan 500 ms dalam contoh ini.
Charlie

Saya sepenuhnya tidak setuju dengan Anda, bahkan ketika saya menulis kode 2 tahun yang lalu. Konter harus ada di sana, karena OP memintanya. Tentu, jika Anda menggunakan ini untuk menghentikan penghitung setelah menekan tombol, misalnya, ini akan menjadi solusi sub-optimal, tetapi hanya untuk jeda saat melayang, ini adalah salah satu solusi paling sederhana yang tersedia.
Aart den Braber
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.