Question

我对JS Function Execution有一点问题。这就是代码：

function CaricaImmagini() {
    //First for loop
    for (i = 0; i < tiles.length; i++)
    {
        tileGraphics[i] = new Image();
        tileGraphics[i].src = tiles[i];

        tileGraphics[i].onload = function() 
        {
            img_loaded++;
            pda.SetPerc(Math.round((70/(tiles.length + img_nec.length))*img_loaded));
            pda.CounterFill();
        }   
    }
    //Second for loop
    for (i=0; i < img_nec.length; i++)
    {
        imgs[i] = new Image();
        imgs[i].src = img_nec[i];

        imgs[i].onload = function() 
        {
            img_loaded++;
            pda.SetPerc(Math.round((70/(tiles.length + img_nec.length))*img_loaded));
            pda.CounterFill();
        }
    }
    //Change % in Canvas
    pda.SetPerc(75);
    pda.CounterFill();
}

问题是'在画布中更改％'注释下的函数是在for循环之前执行的。所以在画布中我首先看到75％（setperc函数渲染％loading），然后我看到这些Calc的输出[Math.round（（70 /（tiles.length + img_nec.length））* img_loaded）]。我怎么解决？

问候，50特别

Answer 1

这是因为稍后会触发onload事件，然后才会执行您定义的回调。因此，函数末尾的行首先被执行是正常的 - 它可能没有任何不同。

所以只要把0％放在那里：

    //Change % in Canvas
    pda.SetPerc(0);
    pda.CounterFill();

但是，如果要在加载完所有代码后执行代码，则定义回调。你可以这样做：

function CaricaImmagini(callback) { // notice the parameter that must be passed
    // ...
    tileGraphics[i].onload = function() 
    {
        // ...
        if (img_loaded == tiles.length + img_nec.length && callback) callback(); 
    }
    // ...
    imgs[i].onload = function() 
    {
        // ...
        if (img_loaded == tiles.length + img_nec.length && callback) callback(); 
    }
}

然后通过传递回调函数来调用该函数：

CaricaImmagini(function () {
    // all is loaded now
    //Change % in Canvas
    pda.SetPerc(75);
    pda.CounterFill();
});

Answer 2

这是一种可能对您有帮助的模式：

var nr = 100;
var imgs = [];
var some_sources = ... // list of 100 sources
var imgs_loaded = 0;

for(var i = 0; i < nr; i++) {
   imgs[i] = new Image();
   imgs[i].src = some_sources[i];
   imgs[i].onload = function() {
      imgs_loaded++;
      if (imgs_loaded === nr) {  // when all pictures are loaded
         doSomethingElse();
      }
   }
}

因此，让所有图片异步加载，每次图像到达时检查，如果所有图像都已加载。如果在加载最后一张图片后最终为真，则调用另一个函数。

JS函数执行有问题

2 个答案: