Beenden Sie den Aufruf von setInterval in JavaScript

Ich verwende setInterval(fname, 10000);, um alle 10 Sekunden eine Funktion in JavaScript aufzurufen. Ist es möglich, den Anruf bei einem Ereignis zu beenden?

Ich möchte, dass der Benutzer die wiederholte Aktualisierung von Daten stoppen kann.

setInterval()Gibt eine Intervall-ID zurück, an die Sie übergeben können clearInterval():

var refreshIntervalId = setInterval(fname, 10000);

/* later */
clearInterval(refreshIntervalId);

Siehe die Dokumente für setInterval()und clearInterval().

Wenn Sie den Rückgabewert setIntervaleiner Variablen festlegen , können Sie ihn clearIntervalstoppen.

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

Sie können eine neue Variable festlegen und sie bei jeder Ausführung um ++ (eine hochzählen) erhöhen lassen. Dann verwende ich eine bedingte Anweisung, um 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 richtig ist.

In den obigen Antworten wurde bereits erläutert, wie setInterval ein Handle zurückgibt und wie dieses Handle zum Abbrechen des Intervall-Timers verwendet wird.

Einige architektonische Überlegungen:

Bitte verwenden Sie keine Variablen ohne Gültigkeitsbereich. Am sichersten ist es, das Attribut eines DOM-Objekts zu verwenden. Der einfachste Ort wäre "Dokument". Wenn die Auffrischung über eine 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 im Button-Click-Handler definiert ist, müssen Sie sie nicht erneut definieren. Der Timer kann fortgesetzt werden, wenn die Schaltfläche erneut angeklickt wird.

Bereits beantwortet ... Wenn Sie jedoch einen vorgestellten, wiederverwendbaren Timer benötigen, der auch mehrere Aufgaben in unterschiedlichen Intervallen unterstützt, können Sie meinen TaskTimer (für Knoten und Browser) verwenden.

// 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, um die Datenaktualisierung zu stören. Sie können auch anrufen timer.pause()dann , timer.resume()wenn sie müssen wieder aktivieren.

Sehen Sie hier mehr .

Mit der Methode clearInterval () kann ein mit der Methode setInterval () festgelegter Timer gelöscht werden.

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

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

@cnu,

Sie können das Intervall stoppen, wenn Sie versuchen, Code auszuführen, bevor Sie Ihren Konsolenbrowser (F12) suchen ... versuchen Sie es mit einem Kommentar clearInterval (Trigger). : P.

Überprüfen Sie beispielsweise eine Quelle:

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>

Deklarieren Sie die Variable, um den von setInterval (...) zurückgegebenen Wert zuzuweisen, und übergeben Sie die zugewiesene Variable an clearInterval ().

z.B

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 dort, wo Sie Zugriff auf den oben angegebenen Timer haben , rufen Sie clearInterval auf

$('.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);

Sie können das Intervall auch stoppen, indem Sie einen Ereignis-Listener hinzufügen, um beispielsweise eine Schaltfläche mit der ID "Stoppintervall" zu erstellen:

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

HTML:

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

Hinweis: Das Intervall wird weiterhin ausgeführt, es wird jedoch nichts passieren.

So habe ich die clearInterval () -Methode verwendet, um den Timer nach 10 Sekunden anzuhalten.

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>

Verwenden Sie setTimeOut, um das Intervall nach einiger Zeit anzuhalten.

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

Ich denke, der folgende Code wird helfen:

var refreshIntervalId = setInterval(fname, 10000);

clearInterval(refreshIntervalId);

Sie haben den Code zu 100% korrigiert ... Also ... Was ist das Problem? Oder es ist ein Tutorial ...

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

Fügen Sie einfach eine Klasse hinzu, die das Intervall anweist, nichts zu tun. Zum Beispiel: beim Schweben.

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 seit Ewigkeiten nach diesem schnellen und einfachen Ansatz gesucht, daher veröffentliche ich mehrere Versionen, um so viele Menschen wie möglich daran zu erinnern.