Repeating an Array Looping in jQuery

Question

I am trying to get a jQuery snippet to loop around and keep displaying the messages in the array. This is what I have so far and it works, it just won't loop round after once even though I used setTimeout function.

What am I doing wrong? What would be best practice and why?

Thanks in advance

    var obj = $("div");
    var arr = $.makeArray(obj);
    var len = arr.length;
    var i = 0;


    function printloop() {
        arr[i].style.display = "block";
        i++;
        if (i < len) {
            setTimeout(printloop, 2000);
        } else {
            setTimeout(function() {
                    $("div").css("display", "none");
            },1000);
        };
    }
    printloop();

    setInterval(prinloop, 20000);

You never reset `i` to 0, so once it reaches `len` it stays there. — Heretic Monkey, Jun 07 '17 at 21:47
@hasan Please don't put code like this in a Stack Snippet. It has no HTML on which to act, so the snippet is worthless, and, since you didn't add jQuery, throws errors. — Heretic Monkey, Jun 07 '17 at 21:49

score 0 · Answer 1 · answered Jun 07 '17 at 21:48

If I understand correctly, after you've made it through all the divs, you want to hide them all again and restart the process.

If so, try this:

// ...
setTimeout(function() {
    $("div").css("display", "none");
    i = 0; // start back at the first div
    printloop();
}, 1000);

Note that your setInterval call misspells printloop (prinloop), but I don't think you want that line at all anyway. I'd suggest deleting it.

Full working example:

var arr = $.makeArray($('div'));
var i = 0;

function printloop() {
    arr[i].style.display = "block";
    i++;
    if (i < arr.length) {
        setTimeout(printloop, 2000);
    } else {
        setTimeout(function() {
            $("div").css("display", "none");
            i = 0;
            printloop();
        }, 1000);
    }
}
printloop();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="display:none">Div 1</div>
<div style="display:none">Div 2</div>
<div style="display:none">Div 3</div>

score 0 · Accepted Answer · answered Jun 07 '17 at 22:00

You only need setInterval() read the documentation:

setTimeout(function, milliseconds)

Executes a function, after waiting a specified number of milliseconds.

setInterval(function, milliseconds)

Same as setTimeout(), but repeats the execution of the function continuously.

Use this, I hope help you.

var obj = $("div");
        var arr = $.makeArray(obj);
        var len = arr.length;
        var i = 0;

        function printloop() {
            if (i >= len) {
                i = 0
                $("div").css("display", "none");
            };
            arr[i].style.display = "block";
            i++;
        }
        printloop();

        setInterval(printloop, 2000); // setInterval(prinloop, 20000); not work because prinloop is undefined

div{ display: none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
H
</div>
<div>
E
</div>
<div>
L
</div>
<div>
L
</div>
<div>
O
</div>

Excuse me,one more question,how can I hide H at the beginning,and let it display after 3 seconds? — William, Jun 09 '17 at 02:21

Repeating an Array Looping in jQuery

2 Answers2