JS işlev yürütme ile ilgili sorun

Question

JS İşlev Yürütme ile ilgili bir sorunum var. Bu kod:

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

sorun comment 'Canvas Değişim%' başlığı altında fonksiyonlar döngüler için önce çalıştırılan olmasıdır. Tuvalde ilk% 75'i görüyorum (setperc işlevi% yükleniyor), ve bundan sonra bu Calc [Math.round ((70/(tiles.length + img_nec.length)) * çıkışını görüyorum. Img_loaded)]. Nasıl çözebilirim?

Selamlar, 50Special

onload olaylar daha sonra tetiklenir ve ancak o zaman tanımladığınız geri aramalar çalıştırılacaktır Bunun nedeni

Answer 1

. Böylelikle, fonksiyonunuzun sonundaki satırların ilk önce çalıştırılması normaldir - farklı olamazdı. Bir zamanlar tüm yüklendikten kod icra edilmesini isteyen ancak

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

, daha sonra geri arama tanımlarsanız:

Yani sadece orada% 0 koydu. Böyle yapabileceğini:

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

Daha sonra bunu geri çağırma işlevi geçirerek bu işlevi çağırır: Burada

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

Answer 2

bir şablon, size yardımcı olabilir:

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

Bu yüzden, tüm resimler zaten yüklüyse, resimlerin her seferinde kontrol edilip edilmediğini tüm resimlerin eşzamansız olarak yükleyelim. Son fotoğraf yüklendikten sonra bu son olarak doğruysa, başka bir işlev çağrılır.