지연을 사용하여 HTML을 업데이트하는 동안 jQuery 루프

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에 배열 현재 인덱스 값을 출력하기 = '가 lorem ipsum의' 'ABC DEF GHIJ klmn?' 'ESPRIT'슬픔이 AMET 앉아 '

var에 도착 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); 
} 

그리고 여기 http://jsfiddle.net/wuf25fj8/8/

JS 바이올린에 데모를하고있다