javascript - 加载 "..."循环，每 3 秒更改一次文本

Question

JSFiddle: http://jsfiddle.net/6A7xh/1/

这个脚本的目的是输出

正在加载。

[1 秒延迟] ->

正在加载..

[1 秒延迟] ->

正在加载...

[1 秒延迟] ->

画蒙娜丽莎。

[1 秒延迟] ->

画蒙娜丽莎..

[等等]

<小时/>

所以这就是内容:

 loadList = [
    "Loading the good stuff",
    "Painting Mona Lisa",
    "Just a second longer",
    "Or not",
    "Oh! We forgot to plug it in",
    "That's better",
    "Well",
    "Maybe not",
    "Wondering why",
    "your internet is so slow",
    "Still",
    "Loading",
];


var i = 0;
var x = 0;

function loadTrans(x){
        //if (!$(window).ready){
            $(".intro > p").text(loadList[x]);
            playTrans();
        //}
}

function playTrans(){
    currentText = $(".intro > p").text();
    setTimeout(function(){
        $(".intro > p").text( currentText + ".");
        if(i == 3){
            x++;
            loadTrans(x);
        }
        i++;
        if(i < 4){
            playTrans();
            i = 0;
        }

    },1000);
}

loadTrans();

我认为我想要做的事情很清楚，但到目前为止我的方法似乎失败了。现在，脚本正在一个永无止境的循环中添加句点，并且转换不会每三个循环发生一次。

我在这里做错了什么？有谁知道我可以更巧妙地做到这一点的方法吗？

注意:我最初使用 for 循环执行此操作，但 setTimeout 在这种情况下显然会失败。

Answer 1

You can do this 。您可以将其放入函数中，并将计时器放入变量中。当您的资源全部加载完毕后，您可以使用 clearInterval 来清除计时器。

 var i = 0;
 var textarea = $('.intro p');

 var loadTimer = setInterval(function () {
     if (i % 4 === 0) textarea.text(loadList[i / 4]); //change text after 3 steps
     else textarea.text(textarea.text() + '.');       //add period
     ((i / 4) < loadList.length) ? i++ : i = 0;       //back to start
 }, 500);