Q:

jQuery loop while updating HTML with delay

What I'm trying to do is to iterate over an array of values and show it on HTML. And repeat it all over again. It should have 1 second interval in updating the HTML.
FIDDLE
So far, this is what I've tried and it seems that my setInterval does not work well?
Thanks.
<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);
    });
}    

A:

What you need to something like
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);
}

Demo: Fiddle

