函数中的局部变量覆盖在循环中多次运行

Question

嘿,我在这里遇到小问题.

问题:如何为函数创建唯一变量,因此当多次调用时,变量将保持它们应该的(不交换)

请记住,我必须保持异步,因为循环将很大而不运行它async会很难达到性能

我有一个在画布上绘制项目的功能.然后我在for循环中运行这个函数,根据数组中的一些数据绘制一些画布.

如此简化的版本:

function renderCanvas(canvas, dID) {
    var mName, bName, sName, tName;
    this.layerCounter = mainData[dID]['layerCount'];
    console.debug(designID + " has " + layerCounter + " layers");
    /* that gives 2 layers for first item and 3 for second)*/

    tctx2.clearRect(0, 0, tc2.width, tc2.height);
    var imgPath = sName;
    imgObj = new Image();
    imgObj.src = "img/" + imgPath;
    imgObj.onload = function () {

        tctx2.drawImage(imgObj, 0, 0, w, h, 0, 0, dw, dh);
        layerCounter--;
        console.debug(designID + " has " + layerCounter + " layers");

        tctx3.clearRect(0, 0, tc2.width, tc2.height);
        var imgPath = tName;
        imgObj = new Image();
        imgObj.src = "img/" + imgPath;
        imgObj.onload = function () {

            tctx3.drawImage(talphaObj, 0, 0, w, h, 0, 0, dw, dh);
            layerCounter--;
            console.debug(designID + " has " + layerCounter + " layers");
        };
    }
}
for (var i = 0; i < xArr.length; i++) {
    var cDID = xArr[i];
    renderCanvas(contexts[i], cDID);
}

有什么建议？我对编程很新,所以我可能很容易错过一些东西.

Answer 1

点击一个javascript函数(有异步行为),你想要使用一个闭包:

//im assuming contexts array is defined some where up here??

for (var i = 0; i < xArr.length; i++) {
    var cDID = xArr[i];

    //the following function will self execute on each loop
    (function (c, d) {
        //Insert your renderCanvas function body here
        //but use variable c and d in this closure.
        //The values you have passed into this closure
        //are now 'fixed' in this scope and cannot
        //be interfered with by subsequent iterations
    })(contexts[i], cDID);
}});

基本上你将你的函数包装在另一个范围内,这样在现在异步循环的下一次迭代中你就不能覆盖你的局部变量(我认为这是你所指的'交换'变量的行为)

这给了javascript闭包的一个很好的解释,它可能是一个令人困惑的主题!- JavaScript闭包如何工作？