Berhenti mengatur panggilan Interval dalam JavaScript

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.

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

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Lihat dokumen untuk setInterval()dan clearInterval().

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

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

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.

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.

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 .

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);

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

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
});

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.

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>

Gunakan setTimeOut untuk menghentikan interval setelah beberapa waktu.

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

Saya kira kode berikut akan membantu:

var refreshIntervalId = setInterval(fname, 10000);

clearInterval(refreshIntervalId);

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

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.