如何使setInterval在一段时间后或经过多次操作后停止？

Question

我使用这个答案中的代码创建了一个使用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);

        })();

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

Answer 2

最简单的解决方案是

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 3

使用clearInterval清除的时间间隔。您需要传递从setInterval方法中获得的间隔 id 。

例如

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

})();