Question

I’ve been trying for two days now to pass an array into a setTimeout callback.

I’ve been looking all over the internet, and I’ve read maybe 10 different StackOverflow questions with all their answers. I must be missing something because after trying all of these different things it still doesn’t work. Here is where I stand right now:

function testing(pixels){    

        return function(){
          for(i=0; i<pixels.length;i++){
                a = pixels[i][0];
                b = pixels[i][1];
                c = pixels[i][2];
                d = pixels[i][3];
                box = pixels[i][5];
                done = pixels[i][6];


                color_to_draw = done ? box.color:active_color;
                ctx.fillRect(a,b,c,d);        
                ctx2.clearRect(box.x-1,box.y-1,box.w,box.h);
                draw_colored_box(box.x, box.y, box.w, box.h, color_to_draw, box.alpha, true, ctx2);
            }
        };

}

function ias(pixel_batch){
  var color_to_draw; 
    ctx.fillStyle = "#000000";
    var a, b, c, d, e, box, done, i;


        setTimeout(testing(pixel_batch),pixel_batch[0][4]);
}

I’ve gotten out of all the different solutions I found that my method here should work. I am clearly doing something wrong, as it DOES NOT work.

The problem is that, in the function ias(), pixel_batch.length is equal to 3, or however many items get put into that array, even in the function testing(), pixels.length is the correct value, but inside the function RETURNED by testing, pixels.length` is equal to 0…

Originally, this is what I had tried:

function ias(pixel_batch){
  var color_to_draw; 
    ctx.fillStyle = "#000000";
    var a, b, c, d, e, box, done, i;


        setTimeout((function(pixels){
            console.log(pixels.length);

            return function(){

              for(i=0; i<pixels.length;i++){
                    a = pixels[i][0];
                    b = pixels[i][1];
                    c = pixels[i][2];
                    d = pixels[i][3];
                    box = pixels[i][5];
                    done = pixels[i][6];


                    color_to_draw = done ? box.color:active_color;
                    ctx.fillRect(a,b,c,d);        
                    ctx2.clearRect(box.x-1,box.y-1,box.w,box.h);
                    draw_colored_box(box.x, box.y, box.w, box.h, color_to_draw, box.alpha, true, ctx2);
                }
            };
        })(pixel_batch),pixel_batch[0][4]);
}

As believe it does not need to be done through an externally defined function, but at this point I’ve started trying anything/everything.

How can I get pixel_batch (the parameter passed to ias()) into the callback for setTimeout?

[EDIT/UPDATE]
Here is the code that actually CALLS ias():

function redraw_boxes(){

    //This loop simply draws the active boxes again, on top of the previous set.
    //At this point in time there is no need to clear the canvas at all.
    var i; var i2; var box;
    var temp_pixelation_array = pixelation_array.slice(0);
    var x_mod; var y_mod; 
    var random_array_key;
    var max_runs;
    var the_pixel_batch = [];
    var num_pixels_per_batch = 3;
    var speed_to_pixelate = 3;
    var done;
    var temptimer=0;
    var timers = [];
    for(i=0;i<newly_acquired_boxes.length;i++){    
    temptimer=0;

    temp_pixelation_array = pixelation_array.slice(0);
        max_runs = temp_pixelation_array.length;
            box = boxes[newly_acquired_boxes[i].column][newly_acquired_boxes[i].row];

        for(i2 = 0; i2<max_runs;i2++){

           random_array_key = ~~((Math.random()*temp_pixelation_array.length));

            x_mod = temp_pixelation_array[random_array_key][0];
            y_mod = temp_pixelation_array[random_array_key][1];
            temp_pixelation_array.splice(random_array_key,1);

            done = i2<max_runs-1 ? true:true ; 
            the_pixel_batch.push([box.x+x_mod, box.y+y_mod, particle_size, particle_size,temptimer,box,done]);
            if(the_pixel_batch.length>= num_pixels_per_batch){                
                ias(the_pixel_batch);
                the_pixel_batch.length = 0;
                temptimer += num_pixels_per_batch*speed_to_pixelate;
            }




        }






    }
    newly_acquired_boxes.length=0;


}

[2 EDIT/UPDATE 2]

I wish I could accept all your answers, as you were all technically right. It’s my fault for not giving you the right information to begin with. I up voted everyone because you all deserved the answer, you just couldn’t give it to me with the information provided.

Answer 1

Your problem is right here:

ias(the_pixel_batch);
the_pixel_batch.length = 0;

You’re clearing the Array before the setTimeout runs.

---

You should do:

pixel_batch.length = 0;

…in the setTimeout callback.

function ias(pixel_batch) {
    ctx.fillStyle = "#000000";

    setTimeout(function () {
        var color_to_draw, a, b, c, d, e, box, done, i;

        for (i = 0; i < pixels.length; i++) {
            a = pixels[i][0];
            b = pixels[i][1];
            c = pixels[i][2];
            d = pixels[i][3];
            box = pixels[i][5];
            done = pixels[i][6];

            color_to_draw = done ? box.color : active_color;
            ctx.fillRect(a, b, c, d);
            ctx2.clearRect(box.x - 1, box.y - 1, box.w, box.h);
            draw_colored_box(box.x, box.y, box.w, box.h, color_to_draw, box.alpha, true, ctx2);
        }
        pixel_batch.length = 0; // <<--- RIGHT HERE
    }, pixel_batch[0][4]);
}