Выполнить конкретный скрипт после загрузки ajax

Question

Есть такой код:

var artAjaxRequest = new function ()
{
  var xhr;

  xhr = new XMLHttpRequest();
  xhr.open('GET', '/assets/json/arts.json', true);
  xhr.send();

  xhr.onload = function(){
    // Тут мы парсим json и формируем массив картинок
  }

  this.getNewArts = function(){
    // Эта функция занимается тем, что выводит картинки на страницу
  };
}();

Исполняется это всё "хозяйство" через artAjaxRequest.getNewArts();.
Но есть тут проблема: когда я пишу где-то в коде artAjaxRequest.getNewArts();, выполняется код getNewArts, тогда как сам json ещё не "прилетел" и функция onload не отработала своё. Почему? Потому что ajax-запрос не выполняется так быстро, как с кодом разбирается браузер.
Соответственно, json не распарсен и в функции getNewArts возникают ошибки.
И вот вопрос: как сделать так, чтобы .getNewArts выполнялась после того, как отработает xhr.onload?
Но не спешите помещать artAjaxRequest.getNewArts(); внутрь onload. Загвозка в том, что метод getNewArts() будет вызываться часто, а не один единственный раз, когда прилетает json.
Буду благодарен за разъяснения и советоы по улучшению композиции кода.

Answer 1

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

var artAjaxRequest = new function ()
{
  var xhr;

  xhr = new XMLHttpRequest();
  xhr.open('GET', '/assets/json/arts.json', true);
  xhr.send();

  var response;

  var subscribers = [];

  xhr.onload = function(){
    // Тут мы парсим json и формируем массив картинок
    response = parsedJSON;

    // Оповещаем подписчиков
    subscribers.forEach(function(sub) {
      sub();
    });
    subscribers.length = 0;
  }

  this.getNewArts = function(next){
    if (!response) {
      // Подписываемся
      subscribers.push(getNewArts.bind(this, next));
      return;
    }
    // Эта функция занимается тем, что выводит картинки на страницу
    next(something)
  };
}();