Using settimeout to queue functions in a delayed manner?

Question

Update: I edited the setTimeout() code to run the code inside a function, but now nothing runs at all. I also changed the function to accept drawcount, i, and j, making the call appendcharacter(drawcount, i, j). It still does nothing at all (although originally it ran, all at the same time). For some reason setTimeout is not running the function properly after the timeout.

--Original Question--

I have the following code (note not all variables are listed, just what was relevant or was with this section of code). I would like to stagger the running of appendcharacter(drawcount) so that it will run in half-second intervals, yet this code runs everything at exactly the same time:

        var $span, $br;
        var $img = $('#image');

        $(document).ready(function () {
            var drawcount = 0;
            for (var j = 0; j < imgwidth; j++) {
                $("#image").append("<br>");

                for (var i = 0; i < imgheight; i++) {
                    var timeout = 500 * drawcount;
                    console.log(timeout);
                    setTimeout(function () {
                        appendcharacter(drawcount, i, j);
                    },timeout);
                    drawcount++;
                }
            }


            function appendcharacter(drawcount, i, j) {
                $span = $("<span id='" + i + "_" + j + "' style='position:relative; display: inline; color: rgba(" + pixels[j][i].red + " , " + pixels[j][i].green + " , " + pixels[j][i].blue + ", 1);'></span>").appendTo($img);
                switch (drawcount % 18) {
                    case 0:
                        $("#" + i + "_" + j).append("/");
                        break;
                    case 2:
                        $("#" + i + "_" + j).append("-");
                        break;
                    case 3:
                        $("#" + i + "_" + j).append("/");
                        break;
                    case 4:
                        $("#" + i + "_" + j).append("-");
                        break;
                    case 5:
                        $("#" + i + "_" + j).append("/");
                        break;
                    case 6:
                        $("#" + i + "_" + j).append("-");
                        break;
                    case 7:
                        $("#" + i + "_" + j).append("(");
                        break;
                    case 8:
                        $("#" + i + "_" + j).append("8");
                        break;
                    case 9:
                        $("#" + i + "_" + j).append("8");
                        break;
                    case 10:
                        $("#" + i + "_" + j).append(")");
                        break;
                    case 11:
                        $("#" + i + "_" + j).append("-");
                        break;
                    case 12:
                        $("#" + i + "_" + j).append("\\");
                        break;
                    case 13:
                        $("#" + i + "_" + j).append("-");
                        break;
                    case 14:
                        $("#" + i + "_" + j).append("\\");
                        break;
                    case 15:
                        $("#" + i + "_" + j).append("-");
                        break;
                    case 16:
                        $("#" + i + "_" + j).append("\\");
                        break;
                    case 17:
                        $("#" + i + "_" + j).append("  ");
                        break;
                }
            }


        });

`appendcharacter(drawcount)` calls the function immediately. Read: http://stackoverflow.com/q/14791158/139010 and/or http://stackoverflow.com/q/3583724/139010 — Matt Ball, Sep 17 '13 at 05:41
They're 500 milliseconds apart, hence `500 * drawcount`. I fixed the other error. Now it's not running at all. — JVE999, Sep 17 '13 at 05:43
possible duplicate of [Javascript closure inside loops - simple practical example](http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Felix Kling, Sep 17 '13 at 06:02

Arun P Johny · Accepted Answer · 2013-09-17T05:53:40.340

1

You are invoking the function appendcharacter and passing the value returned by it as the callback to the setTimeout method.

You need to pass a function reference to the setTimeout which will get invoked, you also need to use a local closure function because of the reference to shared variable drawcount in the callback

        (function(drawcount, i, j){
            setTimeout(function () {
                appendcharacter(drawcount, i, j);
            }, timeout);
        })(drawcount, i, j)

You also need to pass i and j as aprams to appendcharacter

ex

function appendcharacter(drawcount, i, j) {
    ..
}

edited Sep 17 '13 at 05:53

answered Sep 17 '13 at 05:40

Arun P Johny

384,651
66
527
531

@MattBall yes just saw the closure problem – Arun P Johny Sep 17 '13 at 05:42
This, along with the edited code in the post above does not run anything. – JVE999 Sep 17 '13 at 05:45
@Jamil I've made a slight change using a anonymous callback function – Arun P Johny Sep 17 '13 at 05:46
This doesn't work either.. I changed `i` and `j` to be passed to the function i.e. `appendcharacter(drawcount, i, j)` and `function appendcharacter(drawcount, i, j){}`, but that didn't solve it either. – JVE999 Sep 17 '13 at 05:50

Using settimeout to queue functions in a delayed manner?

1 Answers1