comment faire un setInterval arrêter après un certain temps ou après un certain nombre d'actions?

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

Comment puis-je l'arrêter après un certain temps? dire après 60seconds ou après qu'il a disparu à travers la boucle?

Vous pouvez voir les mots changeant ici:
http://skolresurser.se/

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

        })();
InformationsquelleAutor Alisso | 2012-02-03
  1. 101

    Pour l'arrêter après l'exécution d'un certain nombre de fois, il suffit d'ajouter un compteur à l'intervalle de temps, puis quand il atteint ce nombre 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 a passé (par exemple, 1 minute) vous pouvez faire:

    var startTime = new Date().getTime();
var interval = setInterval(function(){
    if(new Date().getTime() - startTime > 60000){
        clearInterval(interval);
        return;
    }
    //do whatever here..
}, 2000);
    • Mais que faire si //do whatever here prend plus de 2 secondes?
    • Il n'a pas d'importance, c'est synchrone, il va faire les choses dans la fonction puis il va attendre 2s. Si le tout va prendre plus que le nombre de fois que les heures de fonctionnement de 2s.
    • Elle fait une animation. Votre fonction n'auront pas à attendre pour l'animation complète si vous avez mis votre fonction dans l'animation de rappel.
    • Désolé, je comprends maintenant - si le bit dans le début de la boucle asynchrone animation qui pourrait prendre > 2 secondes, vous a - oui, dans ce cas, il est préférable d'utiliser un délai d'attente comme vous le suggérez, mais je suppose que ce n'est pas précisément ce que la question se pose au sujet de.
    • Je suis le second de travail! Alors maintenant, je peux modifier et le fait est que l'animation s'arrête après un certain temps 🙂
    InformationsquelleAutor Mark Rhodes
  2. 4

    Utilisation clearInterval pour effacer l'intervalle. Vous avez besoin de passer l'id d'intervalle, ce qui vous obtenez à partir de setInterval méthode.

    E. g.

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

    Pour effacer le au-dessus de l'intervalle d'utilisation

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

})();
    InformationsquelleAutor ShankarSangoli
  3. 2

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

    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);
            }
        });
    });
}());
    • Bon point, bien qu'il aurait un autre aspect de ce genre, je suppose que vous auriez besoin de modifier la 2000 de la valeur, en prenant le temps qu'il a fallu pour compléter l'animation à l'écart.
    • Ce serait jusqu'à l'OP. 2000ms, 1700ms, que ce soit. À ce stade, c'est une config tweak.
    • Une interminable récursive setTimeout va conduire à un débordement de pile finalement: medium.com/@devinmpierce/recursive-settimeout-8eb953b02b98
    InformationsquelleAutor AlienWebguy
  4. 2

    Vous pouvez utiliser setTimeout au lieu de cela, ce qui est mieux:

    JS:

    (function foo(){ //wrap everything in a self-invoking function, not to expose "times"
  times = 20; //how many times to run
  (function run(){
    //do your stuff, like print the iteration
    document.body.innerHTML = times;

    if( --times ) //200 * 20 = 4 seconds
      setTimeout(run, 100);
  })();
})();

    • Attention, depuis récursive setTimeout peut conduire à un débordement de pile (l'erreur, pas sur ce site). medium.com/@devinmpierce/recursive-settimeout-8eb953b02b98
    • l'article lié utilise la main en agitant explication et semble être faux: chaque rappel fait pour les délais d'attente expiré vient de la boucle d'événement avec une nouvelle pile d'appel. L'appel de setTimeout à partir de l'intérieur d'un tel rappel ne sera pas provoquer un débordement de pile.
    InformationsquelleAutor vsync