回调/ que加载-完成后调用函数

Question

当所有的imageData变量都被填充后，调用render()的最佳方式是什么？

我是否可以使用回调来依次调用它们，然后调用render，或者是否有更好的方法？

function loadImageData()
    {

        //Get Background Image Data
        var backgroundImg = loadImage(background, function(){
            backgroundData = getDataFromImage(backgroundImg);
        }); 

        //Get Overlay Image Data
        var overlayImg = loadImage(overlay, function(){
            overlayData = getDataFromImage(overlayImg);

        }); 

        //Get more Image Data
        //Get more Image Data
        //Get more Image Data

    }

    function render()
    {
        ctx.putImageData(backgroundData, 0,0);
    }

Answer 1

我的方法包括创建一个你需要的回调次数的“计数器”，如下所示：

function loadImageData()
{
  var counter = 5;
  function imageReceived() {
    if (--counter == 0) render();
  }
  //Get Background Image Data
  var backgroundImg = loadImage(background, function(){
    backgroundData = getDataFromImage(backgroundImg);
    imageReceived();
  }); 

  //Get Overlay Image Data
  var overlayImg = loadImage(overlay, function(){
    overlayData = getDataFromImage(overlayImg);
    imageReceived();
  }); 

    //Get more Image Data
    //Get more Image Data
    //Get more Image Data

当然，我可能会以这样一种方式重写它，即在loadImage()函数中增加等待请求的数量，并有一个全局回调，只要等待请求的数量回到0，就会触发该回调。

Answer 2

从回调函数内部，将各个图像元素“渲染”到画布上。

    var backgroundImg = loadImage(background, function(){
        backgroundData = getDataFromImage(backgroundImg);
        ctx.putImageData(backgroundData, 0,0);
    });