javascript - jQuery 循环，同时延迟更新 HTML

Question

我想做的是迭代一个值数组并将其显示在 HTML 上。然后再重复一遍。更新 HTML 的时间间隔应为 1 秒。

FIDDLE

到目前为止，这是我尝试过的，似乎我的 setInterval 效果不佳？ 谢谢。

<div class='x'>Hello World</div>

var arr = [
    'lorem ipsum',
    'dolor sit amet',
    'abc def ghij klmn?',
    'esprit d corps'
];

if (arr) {
    $.each(arr, function (i, v) {
        setInterval(function () {
            var index = i == arr.length - 1 ? 0 : i;
            var data = arr[index];

            console.log(data);
            $('.x').html(data);
            console.log();
        }, i * 1000);
    });
}    

Answer 1

你需要什么，比如

var arr = [
    'lorem ipsum',
    'dolor sit amet',
    'abc def ghij klmn?',
    'esprit d corps'];

if (arr) {
    var i = 0;
    setInterval(function () {
        i = i == arr.length ? 0 : i;
        var data = arr[i];
        $('.x').html(data);
        i++;
    }, 1000);
}

演示:Fiddle