javascript - 如何在jquery中重复一个句子

Question

我有这个 jquery 脚本，它逐一显示句子中的每个单词。

http://jsfiddle.net/9tvd3ybg/

$(function (){    

var str = "It was a dark and stormy night in the Bay of Biscay, and the Captain and his sailors were seated around the fire. Suddenly, one of the sailors said, Tell us a story, Captain. And the Captain began, ";

var spans = '<span>' + str.split(/\s+/).join(' </span><span>') + '</span>';

$(spans).hide().appendTo('.text').each(function(i){
        $(this).delay(100 * i).fadeIn(100);

});

});

我希望句子一遍又一遍地重复，每次都附加到结尾，即。

那是比斯开湾一个漆黑多风的夜晚，船长和他的水手们围坐在火堆旁。突然，一名水手说，给我们讲个故事吧，船长。船长开始说，那是比斯开湾一个漆黑多风的夜晚，船长和他的水手们围坐在火边。突然，一名水手说，给我们讲个故事吧，船长。船长开始，......

不确定如何实现这一目标。我试过 .promise 和 .delay 但没有成功。任何帮助将不胜感激，谢谢。

Answer 1

这是一个使用您提供的代码的简单超时:

var populateSentence = function () {
    $(spans).hide().appendTo('.text').each(function (i) {
        $(this).delay(100 * i).fadeIn(100);
        if (i === ($(spans).length - 1)) {
            setTimeout(function () {
                populateSentence();
                // timeout set to account for fade in delay
            }, $(spans).length * 100);
        }
    });
};
populateSentence();

Here is a Fiddle