Stoppen Sie setInterval Anruf in JavaScript

Question

Ich bin mit setInterval(fname, 10000); einer Funktion in JavaScript alle 10 Sekunden zu rufen. Ist es möglich, auf ein Ereignis ruft ihn zu stoppen?

Ich möchte, dass die Benutzer in der Lage sein, um die wiederholte Aktualisierung der Daten zu stoppen.

Answer 1

setInterval() gibt ein Intervall-ID, die Sie clearInterval() passieren kann:

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Lesen Sie die Dokumentation für setInterval() und clearInterval() .

Answer 2

Wenn Sie den Rückgabewert von setInterval auf eine Variable setzen, können Sie clearInterval verwenden, ihn zu stoppen.

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

Answer 3

Sie können eine neue Variable und von ++ (zähle eins) jedes Mal, es läuft erhöht, dann verwende ich eine bedingte Anweisung, sie zu beenden:

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

Ich hoffe, dass es hilft, und es ist richtig.

Answer 4

Die Antworten oben bereits erklärt, wie setInterval ein Handle zurück, und wie dieser Griff verwendet wird, um das Intervall-Timer abzubrechen.

Einige architektonischen Überlegungen:

Bitte verwenden Sie nicht "scope-less" Variablen. Der sicherste Weg ist das Attribut eines DOM-Objekt zu verwenden. Am einfachsten wäre „Dokument“. Wenn die Auffrischung durch einen Start / Stopp-Taste gestartet wird, können Sie die Taste selbst verwenden:

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

Da die Funktion in der Schaltfläche Click-Handler definiert ist, müssen Sie es wieder nicht definieren. Der Timer kann wieder aufgenommen werden, wenn die Taste erneut angeklickt wird.

Answer 5

bereits beantwortet ... Aber wenn Sie eine vorgestellten, wiederverwendbaren Timer benötigen, die auch mehrere Aufgaben auf verschiedenen Intervallen unterstützt, können Sie meine Tasktimer (für Knoten und 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();

In Ihrem Fall, wenn Benutzer klicken zum Stören der Datenauffrischung; Sie können auch timer.pause() dann rufen timer.resume(), wenn sie wieder aktivieren, müssen.

Siehe mehr hier .

Answer 6

@cnu,

Sie können Intervall stoppen, wenn ich versuche, Laufcode vor ur Konsole Browser (F12) suchen ... versuchen clearInterval Kommentar (Trigger) ist eine Konsole aussehen wieder, nicht Beautifier? : P

Überprüfen Beispiel eine Quelle aus:

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>

Answer 7

Deklarieren Variablenwert zuweisen zurück von setInterval (...) und gibt die zugeordnete Variable zu clearInterval ();

z.

var timer, intervalInSec = 2;

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

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

// Überall, wo Sie haben Zugriff auf Timer oben Anruf clearInterval erklärt

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

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

Answer 8

Der clearInterval () -Methode verwendet werden kann, einen Timer mit der setInterval () -Methode festgelegt zu löschen.

setInterval gibt immer einen ID-Wert. Dieser Wert kann in clearInterval () übergeben werden, um den Timer zu stoppen. Hier ist ein Beispiel für Timer ab 30 und stoppt, wenn es 0 wird.

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

Answer 9

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

Sie können auch das Intervall stoppen einen Ereignis-Listener durch Hinzufügen der eine Schaltfläche mit der ID sagen zu lassen, „Stop-Intervall“:

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

HTML:

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

Hinweis: Das Intervall wird noch ausgeführt wird, wird nichts passieren, obwohl

.

Answer 10

Warum nicht einen einfacheren Ansatz verwenden? Fügen Sie eine Klasse!

Sie einfach eine Klasse hinzufügen, die das Intervall nichts zu tun erzählt. Zum Beispiel:. 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>

Ich habe für diesen schnellen und einfachen Ansatz für Alter suchen, so dass ich bin Entsendung mehr Versionen so viele Menschen wie möglich davon einzuführen.