Javascript:onload函数调用两次

Question

Transition.start = function(){
    for(var j = 0; j < 6; j++)
    {
         console.log("FOR LOOP");
         (function(){
             console.log("INNER Function");
             var image = new Image();
             image.src = path + Config.imgName[j] + ".jpg";
             image.onload = function () {

                 console.log("GONE");
                 clearImages[source].push(image);
                 console.log(image);
             };
         })();
     }
}

在此控制台上"FOR LOOP"和"INNER Function"打印6次,但"GONE"打印12次.我无法弄清楚原因.我想运行onload的主体也是6次.

并Transition.start从这样的onDocumentKeyDown监听器中调用

function onDocumentKeyDown( event )
{
    if (keyPressed == 38) //up arrow
        Transition.start();
}

Answer 1

我得到了问题的根源.实际上image.onload每次在浏览器中呈现图像时都会调用它.实际上我一旦加载了图像,我就把它存储起来,clearImages这样如果以后图像是必需的,那么它可以直接从该数组中获取,所以如果将来需要图像那么它将从clearImages数组加载但是再次加载onload函数将被召唤.

所以我通过内部函数本身解决了这个问题image.onload = nullonload