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

这是一次效果，但我想让它连续循环运行。

我已经为我到目前为止所尝试的内容设置了一个小提琴here

感谢您寻找

Answer 1

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

DEMO： 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()或任何其他类型的循环。更简单。

Answer 2

将代码包含在函数内（名为repeat），然后使用setInterval调用

setInterval(function () {
    $('#container').html(''); //clear the container
    repeat();
}, 1100)

JSFiddle

Answer 3

JSFiddle

var text = 'Loading ...';

setInterval(function(){

$('#container').html("");

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

}, 1000);

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

3 个答案:

JSFiddle