Pertanyaan Hentikan panggilan setInterval dalam JavaScript


saya menggunakan setInterval(fname, 10000); untuk memanggil fungsi setiap 10 detik dalam JavaScript. Mungkinkah berhenti memanggilnya di suatu acara?

Saya ingin pengguna untuk dapat menghentikan penyegaran ulang data.


1118
2017-09-20 19:29


asal


Jawaban:


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

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Lihat dokumentasi untuk setInterval() dan clearInterval().


1752
2017-09-20 19:30



Jika Anda mengatur nilai kembalian setInterval ke variabel, Anda dapat menggunakan clearInterval untuk menghentikannya.

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

92
2017-09-20 19:32



Anda dapat menetapkan variabel baru dan menambahkannya menjadi ++ (menghitung satu) setiap kali berjalan, lalu saya menggunakan pernyataan bersyarat 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 berharap itu membantu dan itu benar.


35
2018-05-16 14:02



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

Beberapa pertimbangan arsitektur:

Harap jangan menggunakan variabel "lingkup-kurang". Cara paling aman adalah menggunakan atribut objek DOM. Tempat termudah adalah "dokumen". Jika penyegaran dimulai oleh 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 penangan klik tombol, Anda tidak perlu mendefinisikannya lagi. Pengatur waktu dapat dilanjutkan jika tombol diklik lagi.


10
2018-01-19 05:46



@cnu,

Anda dapat menghentikan interval, ketika mencoba menjalankan kode sebelum melihat browser konsol Anda (F12) ... coba komentar clearInterval (pemicu) terlihat lagi konsol, tidak memperindah? : P

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


4
2018-01-08 17:30



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

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

// Add task(s) based on tick intervals.
timer.addTask({
    name: 'job1',       // unique name of the task
    tickInterval: 5,    // run every 5 ticks (5 x interval = 5000 ms)
    totalRuns: 10,      // run 10 times only. (set to 0 for unlimited times)
    callback: function (task) {
        // code to be executed on each run
        console.log(task.name + ' task has run ' + task.currentRuns + ' times.');
    }
});

// Start the timer
timer.start();

Dalam kasus Anda, saat pengguna mengeklik karena mengganggu penyegaran data; Anda bisa menelepon timer.pause() kemudian timer.resume() jika mereka perlu diaktifkan kembali.

Lihat lebih lanjut di sini.


4
2017-08-23 15:14



Deklarasikan variabel untuk menetapkan nilai yang dikembalikan dari setInterval (...) dan meneruskan variabel yang ditetapkan 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);
}

// Ke mana pun Anda memiliki akses pengatur waktu dinyatakan di atas panggilan clearInterval

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

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

0
2017-10-17 20:15



Mengapa tidak menggunakan pendekatan yang lebih sederhana? Tambahkan kelas!

Cukup tambahkan kelas yang memberi tahu interval untuk tidak melakukan apa-apa. Misalnya: pada 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 yang cepat dan mudah ini selama bertahun-tahun, jadi saya memposting beberapa versi untuk memperkenalkan sebanyak mungkin orang ke dalamnya.


-4
2018-04-27 18:04