javascript - jquery 循环中的打字机效果 - 如何

Question

我正在尝试在 jQuery 中实现打字机效果，这就是我迄今为止所实现的。

var text = 'Loading ...';

//text is split up to letters
$.each(text.split(''), function(i, letter){

    //we add 100*i ms delay to each letter 
    setTimeout(function(){

        //we add the letter to the container
        $('#container').html($('#container').html() + letter);

    }, 100*i);
});

这只是一次效果，但我希望它连续循环运行。

我已经为我迄今为止尝试过的设置了一个 fiddle here

感谢您的浏览

Answer 1

只需维护一个计数器，并在字符串末尾重置为 0。

演示: http://jsfiddle.net/QPNTq/

var chars = 'Loading ...'.split('');
var container = document.getElementById("container");

var i = 0;
setInterval(function () {
    if (i < chars.length) {
        container.innerHTML += chars[i++];
    } else {
        i = 0;
        container.innerHTML = "";
    }
}, 100);

这种方式不需要 .each() 或任何其他类型的循环。简单得多。