Question

I’ve been trying hard, now I thing it is time to ask for help… even if it sounds pretty basic…

I want to show the element by element from one array in a span with the interval of 3 seconds. I’m not quite familiar with jquery callbacks. This is my last attempt to sold this puzze:

        $("#lkDo").click(function () {

            var fullText = $("#theText").text();
            var arr = fullText.split(" ");

            for (i = 0; i < arr.length; i++) {

                window.setTimeout(function () {
                    $("#theText").html(arr[i]);
                }, 3000);

            }
        });

        <span id="theText">The text is here its a boy</span>
        <br />
        <a id="lkDo" href="#">Here</a>

Any Thoughts?

Answer 1

You get unexpected result because of closures. This code would fix it:

        for (i = 0; i < arr.length; i++) {

            (function(i) {
                window.setTimeout(function () {
                    $("#theText").html(arr[i]);
                }, 3000 * i);
            })(i);

        }

http://jsfiddle.net/HWFZS/

Also it is possible to solve the issue using recursion:

var arr = ['a', 'b', 'c', 'd'],
    i = 0;

var changeText = function() {
    setTimeout(function() {
        $("#theText").html(arr[i]);
        i++;

        if (i < arr.length) {
            changeText();
        }
    }, 3000);
};

changeText();​

http://jsfiddle.net/HWFZS/1/

But personally I like the first solution better