обратные вызовы / загрузка очереди - вызов функции после завершения

Question

Каков наилучший способ вызова метода render () после заполнения всех переменных imageData?

Я бы просто вызывал их все последовательно, используя обратные вызовы и вызывал визуализацию, или есть лучший метод?

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

Внутри обратных вызовов «рендеринг» отдельных элементов изображения на холст.

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

Answer 2

Мой подход будет включать в себя создание «счетчика» числа необходимых вам обратных вызовов, что-то вроде этого:

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.