Как сделать setInterval остановить через некоторое время или после нескольких действий?

Я создал цикл "смены слов" с помощью jQuery используя код в этом ответе: jQuery: найдите слово и измените его каждые несколько секунд

Как мне остановить его через некоторое время? скажем, через 60 секунд или после того, как он прошел через цикл?

Вы можете видеть слова, меняющиеся здесь: 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);

        })();

Ответ 1

Чтобы остановить его после запуска определенного количества раз, просто добавьте счетчик к интервалу, затем, когда он достигнет этого числа, очистите его.

например.

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

Если вы хотите остановить его по истечении установленного времени (например, 1 минута), вы можете сделать:

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

Ответ 2

Используйте clearInterval, чтобы очистить интервал. Вам нужно передать идентификатор интервала, который вы получаете из метода setInterval.

например.

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

Чтобы очистить указанный интервал, используйте

clearInterval(intervalId);

Вы можете изменить свой код, как показано ниже.

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

})();

Ответ 3

Вам следует рассмотреть возможность использования рекурсивного setTimeout() вместо setInterval(), чтобы избежать условия гонки.

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

Ответ 4

Вместо этого вы можете использовать setTimeout, что лучше:

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