Question

我有一个带setTimeout函数的for循环：

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

目的是捕获canvas作为屏幕截图，在画布上旋转对象，然后重复。如果没有setTimeout函数（即使延迟为1），画布在捕获画布之前不会重新渲染得足够快，截图看起来很奇怪。

问题是，一旦一切都完成，我想对数组screenArray做一些事情。但我似乎无法得到任何工作。我现在只是使用console.log(screenArray)进行测试，但上面只是在进行循环之前将[]记录到控制台。我理解为什么（在某种程度上）。

所以我一直在玩回调，但是我尝试过的每一个回调方法都会导致错误，[]多次，或者screenArray在循环的每次交互中被记录（所以它是不是空的，但它会记录变量次数）。以下代码执行后者（将输出数组4次）：

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);
}

我甚至尝试将for循环与单独的回调函数相结合，但这只是导致与上面相同的事情（虽然我可能做错了）。

我想要的是只需在for循环完成时记录screenArray（这也意味着等待setTimeout），但我无法正常工作。

Answer 1

你必须在所有tiemouts完成后打印数组。试试这个：

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);
}

Answer 2

----------
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);

for循环中的setTimeout，获取最终值（等待循环完成）

2 个答案: