DrawImage не работает

Question

var canvas = null; 
var context = null; 
var img = null; 
var frames = []; 
var assets = []; 
var imgLoadCount = 0; 

setup = function (fileArray) { 
    assets = fileArray; 
    //Loading an image 
    for(var i = 0; i < assets.length; i++) { 
    console.log(i); 
    frames.push(new Image()); // declare image object 
    frames[i].onload = onImageLoad(assets.length); //declare onload method 
    frames[i].src = URL.createObjectURL(assets[i]); //set url 
    } 
}; 

onImageLoad = function (len) { 
    console.log("IMAGE!!!"); 
    canvas = document.getElementById("my_canvas"); //creates a canvas element 
    context = canvas.getContext('2d'); 
    canvas.width = window.innerWidth; //for full screen 
    canvas.height = window.innerHeight; 
    var x, y, numTilesRow; 
    numTilesRow = 10; 
    imgLoadCount++; 
    console.log("imgLoadCount = " + frames.length + ", length = " + len); 
    if(imgLoadCount != len) { 
    return; 
    } 
    for(var index = 0; index < len; index++) { 
    x = Math.floor((index % numTilesRow)); 
    y = Math.floor(index/numTilesRow); 
    worldX = x * numTilesRow; 
    worldY = y * numTilesRow; 
    context.drawImage(frames[index], worldX, worldY); 
    } 
}; 

Я не могу сказать, почему DrawImage внезапно перестал работать после вставки кода если (imgLoadCount = Len!) {Возвращения;}, что гарантирует, что все изображения загружены правильно. Кто-нибудь, пожалуйста, помогите мне найти решение этой проблемы.

Answer 1

Вам нужно будет понять разницу между ссылкой функции и вызовом функции. Свойство .onload будет назначаться с помощью ссылки на функцию, но вы назначаете ему возвращаемое значение прямого (!) Вызова функции .onImageLoad. Разница заключается в круглых скобках ().

Если вы хотите, чтобы вызвать функцию с параметрами, как обратный вызов .onload, то вы должны включить его в анонимную функцию (которая сама по себе является функцией ссылка)

frames[i].onload = function() {onImageLoad(assets.length);}; 

с этим, Конечно, вы создаете закрытие. Это означает, что в точке выполнения метод onImageLoad() будет иметь доступ к текущему значению assets.length (а не к значению в точке назначения!). Но в вашем случае это не имеет никакого значения, потому что assets.length никогда не меняется.