Comment faire en sorte qu'un setInterval s'arrête après un certain temps ou après un certain nombre d'actions ?

Question

J'ai créé une boucle de "changement de mots" avec jQuery en utilisant le code dans cette réponse : jQuery : Trouver un mot et le changer toutes les quelques secondes

Comment l'arrêter après un certain temps ? Disons après 60 secondes ou après qu'il ait parcouru la boucle ?

(function() {

  // List your words here:
  var words = [
      'Lärare',
      'Rektor',
      'Studievägledare',
      'Lärare',
      'Skolsyster',
      'Lärare',
      'Skolpsykolog',
      'Administratör'
    ],
    i = 0;

  setInterval(function() {
    $('#dennaText').fadeOut(function() {
      $(this).html(words[i = (i + 1) % words.length]).fadeIn();
    });
    // 2 seconds
  }, 2000);

})();

Answer 1

Pour l'arrêter après un certain nombre d'exécutions, il suffit d'ajouter un compteur à l'intervalle, puis lorsqu'il atteint ce nombre, de l'effacer.

par exemple

var timesRun = 0;
var interval = setInterval(function(){
    timesRun += 1;
    if(timesRun === 60){
        clearInterval(interval);
    }
    //do whatever here..
}, 2000); 

Si vous voulez l'arrêter après un certain temps (par exemple 1 minute), vous pouvez le faire :

var startTime = new Date().getTime();
var interval = setInterval(function(){
    if(new Date().getTime() - startTime > 60000){
        clearInterval(interval);
        return;
    }
    //do whatever here..
}, 2000);

Answer 2

Utilisez clearInterval pour effacer l'intervalle. Vous devez passer l'ID de l'intervalle que vous obtenez à partir de setInterval méthode.

Par exemple

var intervalId = setInterval(function(){
                    ....
                 }, 1000);

Pour effacer l'intervalle ci-dessus, utilisez

clearInterval(intervalId);

Vous pouvez modifier votre code comme ci-dessous.

(function(){

    // List your words here:
    var words = [
        'Lärare',
        'Rektor',
        'Studievägledare',
        'Lärare',
        'Skolsyster',
        'Lärare',
        'Skolpsykolog',
        'Administratör'
        ], i = 0;

    var intervalId = setInterval(function(){
        $('#dennaText').fadeOut(function(){
            $(this).html(words[i=(i+1)%words.length]).fadeIn();
            if(i == words.length){//All the words are displayed clear interval
                 clearInterval(intervalId);
            }
        });
       // 2 seconds
    }, 2000);

})();

Answer 3

La solution la plus simple est

var intervalId =   setInterval(function() {
    $('#dennaText').fadeOut(function() {
        $(this).html(words[i = (i + 1) % words.length]).fadeIn();
    });
}, 2000); // run every 2 seconds

setTimeout(function(){
    clearInterval(intervalId);
},10000) // stop it after 10seconds

Answer 4

Je travaille avec VueJs et je voulais supprimer un div après quelques secondes ; voici ce que j'ai fait, j'espère que cela pourra aider quelqu'un ;).

export default {
  name: "Home",
  components: {},
  data() {
    return {
      removeAlert: false,
    };
  },
  methods: {
    removeAlertF() {
      let wait = window.setInterval(() => {
        this.removeAlert = true;
        console.log("done");
        if(true){
          window.clearInterval(wait);
        }
      }, 3000);
    },
  },
  mounted() {
    this.loadData();
    this.removeAlertF();
  },
};

<style>
.remove-alert {
  display: none;
}
</style>

 <div
        :class="removeAlert ? 'remove-alert' : ''"
        role="alert"
      >
        Data loaded successfully
      </div>

Answer 5

Vous devriez envisager d'utiliser un système récursif setTimeout() au lieu de setInterval() pour éviter une situation de course.

var fadecount = 1;
(function interval(){  
    $('#dennaText').fadeOut(function(){
        $(this).html(words[i=(i+1)%words.length]).fadeIn('fast',function(){
            if (fadecount < 30){
                fadecount += 1;
                setTimeout(interval, 2000);
            }
        });
    });
}());