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

填充完所有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);
    }

---

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

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

---

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

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时，就会触发该回调。

cool这是我之前玩过的，并且成功地工作了，我不知道这是不是一个好办法！谢谢。是的，这会很好地将图像渲染到画布上，但我不需要在这个阶段进行渲染-在尝试调用程序的下一部分之前，请确保加载了所有数据。