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

Answer 2

试试这个代码。

1. 创建一个全局变量来存储当前索引。
2. 调用一个函数来从阵列中的setInterval打印当前索引值

变种ARR = [ 'Lorem存有'， '悲坐阿梅特'， 'ABC DEF GHIJ KLMN？'， “ESPRIT d军团' ];

var i = 0; 
    if(arr){ 
    setInterval(function() { 
       i = (i == arr.length - 1) ? 0 : i; 
       var data = arr[i]; 
       printValue(data); 
       i++; 
      }, 1000); 
    } 

function printValue(str){ 
$('.x').html(str); 
} 

，这里是上JS提琴 http://jsfiddle.net/wuf25fj8/8/

工作演示