How to repeat a sentence in jquery

Question

I have this jquery script that shows each word in a sentence one at a time.

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

});

});

I want the sentence to be repeated over and over, adding to the end each time, i.e.

It was a dark and stormy night in the Bay of Biscay, and the captain and his sailors sat around the fire. Suddenly, one of the sailors said: “Tell us a story, captain. And the captain began. It was a dark and stormy night in the Bay of Biscay, and the captain and his sailors were sitting around the fire. Suddenly one of the sailors said:“ Tell us a story, captain. And the captain began, .......

I don’t know how to achieve this. I tried .promise and .delay without success. Any help would be appreciated, thanks.

Answer 1

:

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, ".split(/\s/);

var i = 0;
setInterval(function() {
    $('<span></span>').text(str[i]).hide().appendTo('.text').fadeIn(100);
    i = (i + 1) % str.length;
}, 100);

Answer 2

- , :

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