setInterval-Aufruf in JavaScript stoppen

Question

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

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

Answer 1

トライ

let refresch = ()=>  document.body.style= 'background: #'
  +Math.random().toString(16).slice(-6);

let intId = setInterval(refresch, 1000);

let stop = ()=> clearInterval(intId);

body {transition: 1s}

<button onclick="stop()">Stop</button>

Answer 2

Warum nicht einen einfacheren Ansatz wählen? Fügen Sie eine Klasse hinzu!

Fügen Sie einfach eine Klasse hinzu, die das Intervall anweist, nichts zu tun. Zum Beispiel: bei 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 schon lange nach dieser schnellen und einfachen Methode gesucht, also stelle ich mehrere Versionen ein, um möglichst viele Leute damit bekannt zu machen.