Arrêtez l'appel setInterval en JavaScript

Question

Je utilise setInterval(fname, 10000); pour appeler une fonction toutes les 10 secondes en JavaScript. Est-il possible de cesser cet appel sur un certain événement?

Je veux que l'utilisateur soit capable d'arrêter le rafraîchissement répété de données.

Answer 1

var interval = setInterval(timer, 100);
var n = 0;

function timer() {
  n = n + 0.1
  document.getElementById('show').innerHTML = n.toFixed(2)
}
function pause() {
  clearInterval(interval)
}
function resume(){
  interval = setInterval(timer, 100)
}

0
ARRÊT
REPRENDRE

Answer 2

Pourquoi ne pas utiliser une approche plus simple ? Ajoutez une classe !

Ajoutez simplement une classe qui indique à l'intervalle de ne rien faire. Par exemple, au survol.

var i = 0;
this.setInterval(function() {
  if(!$('#counter').hasClass('pauseInterval')) { //exécuter uniquement s'il n'a pas cette classe 'pauseInterval'
    console.log('Comptage en cours...');
    $('#counter').html(i++); //juste pour expliquer et montrer
  } else {
    console.log('Comptage arrêté');
  }
}, 500);

/* Dans cet exemple, j'ajoute une classe lorsque la souris passe dessus et la retire à nouveau lorsque la souris quitte. Vous pouvez bien sûr faire à peu près ce que vous voulez */
$('#counter').hover(function() { //survol de la souris
    $(this).addClass('pauseInterval');
  },function() { //quitter avec la souris
    $(this).removeClass('pauseInterval');
  }
);

/* Autre exemple */
$('#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;  
}

 
Pause

Je cherchais cette approche rapide et facile depuis des années, donc je poste plusieurs versions pour la présenter au plus grand nombre de personnes possible.