setTimeout within for loop, getting final value (waiting for for loop to finish)

Question

I have a for loop with a setTimeout function:

for (var i=0; i < variable; i++) {
    setTimeout(function() {
        screenArray.push(takeScreen());
        sphere.rotateOnAxis(rotationVector, angle);
        renderer.render(scene,camera);
    }, 1);
}

The purpose there is to capture the canvas as a screenshot, rotate an object on the canvas, and repeat. Without the setTimeout function (even with a delay of 1), the canvas doesn't re-render fast enough before the canvas is capture and the screenshot looks weird.

The issue is that I would like do something with the array, screenArray, once everything is finished. But I can't seem to get anything to work. I'm just using console.log(screenArray) for testing for now, but the above simply logs [] to the console before it does the loop. Which I understand why (to a degree).

So I've been playing with callbacks, but every callback method I've tried either results in an error, [] multiple times, or screenArray being logged every interation of the loop (so it's not empty but it logs variable number of times). The following code does the latter (will output the array 4 times):

for (var i=0; i < screens; i++) {
    setTimeout(function() { loopWork(callback)  }, 1)
}
var callback = function(value) {
    console.log(value);
}
function loopWork(callback) {
    screenArray.push(takeScreen());
    sphere.rotateOnAxis(rotationVector, angle);
    renderer.render(scene,camera);
    callback(screenArray);
}

I even tried combining that with combining the for loop with a separate callback function, but that just resulted in the same thing as the above (though I may have done that incorrectly).

What I want is for it to simply log screenArray when the for loop has completed (which also means waiting for the setTimeout), but I just can't get that working.

You're passing 1 as the duration of the setTimeout? That's 1 millisecond, and all the timers start nearly exactly at the same time. — cookie monster
– cookie monster, Commented Aug 21, 2014 at 16:39
Yup, just 1. I tried longer times, even up to 10000, but that never changed anything. I'm not sure why 1 works (for the purpose to delaying the screenshot), but it does and I'm not going to question it right now. — Kurt
– Kurt, Commented Aug 21, 2014 at 16:45

Pablo Matias Gomez · Accepted Answer · 2014-08-21 16:35:16Z

2

you have to print the array when all the tiemouts have finished. Try this out:

var j=0;
for (var i=0; i < variable; i++) {
    setTimeout(function() {
        screenArray.push(takeScreen());
        sphere.rotateOnAxis(rotationVector, angle);
        renderer.render(scene,camera);
        j++;
        if (j == variable) console.log(screenArray);
    }, 1);
}

answered Aug 21, 2014 at 16:35

Pablo Matias Gomez

6,8338 gold badges41 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nfours · Accepted Answer · 2014-08-21 17:50:29Z

0

----------
var screenCapture = (function(){
    var screenArray = [];
    return{
        loopScreen : function(length){
            var count = 0;
            var _this = this;
            var intvl = setInterval(function () {
                if(count < length){
                    _this.captureScreen(count);
                    count++;
                }else{
                    clearInterval(intvl);
                    console.log(screenArray);
                }
            }, 1)

        },
        captureScreen : function(val){
                 screenArray.push(val)
        }


    }

})()
screenCapture.loopScreen(10);

answered Aug 21, 2014 at 17:50

nfours

12 bronze badges

Collectives™ on Stack Overflow

setTimeout within for loop, getting final value (waiting for for loop to finish)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related