函数中的局部变量将在循环中多次运行 [英] local variables overwrite in function run multiple times in a loop

问题描述

嘿，我在这里有个小问题.

Hey I'm having small issue here.

问题:如何为函数创建唯一变量，因此当多次调用时，变量将保存应有的值(而不是交换)

Question: how can I create unique variables for a function so when called multiple times, the variables will hold what they should (not swap)

请记住，由于循环会很大，因此我必须使其保持异步，否则异步运行会严重影响性能

keep in mind I have to keep it asynchronous as the loop will be large and not running it async would hit the performance very hard

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

I have a function which draws items on canvas. Then I run this function in for loop to draw few canvases depending on some data in array.

简化后的版本:

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

有什么建议吗?我对编程还很陌生，所以我可能缺少一些很简单的东西.

Any suggestions? I'm fairly new to programming so I'm probably missing something very easy.

推荐答案

击中一个您想要使用闭包的javascript函数(具有异步行为):

hitting a javascript function (that has asynchronous behaviour) like this you want to be using a closure:

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

基本上，您将函数包装在另一个作用域中，以便在异步循环的下一次迭代中，您无法覆盖局部变量(我认为这是您所指的交换"变量的行为)

Basically you are wrapping your function in another scope so that on the next iteration of the now async loop you cannot overwrite your local variables (i think this is the behaviour of variables being 'swapped' that you refer to)

这很好地解释了JavaScript的关闭，这可能是一个令人困惑的话题！ - JavaScript闭包如何工作?

this gives a good explanation of javascript closure, it can be a confusing subject! - How do JavaScript closures work?

这篇关于函数中的局部变量将在循环中多次运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！