flickrapi (js) несколько асинхронных вызовов в цикле

Question

Я все время ударил головой в стену, потому что я не могу заставить следующий код работать. Я пытаюсь закодировать фотогалерею с помощью flickrApi и иметь проблемы с несколькими асинхронными вызовами. Но, возможно, есть более чистое решение, чтобы закодировать это.

openPhotoset() вызывается при нажатии ссылки на фотосет. К сожалению, для получения описания фотографии мне нужно использовать другой метод, что означает другой асинхронный вызов. Я перебираю данные, но потому, что я делаю вызов в цикле (это когда у меня есть доступный идентификатор фото), отложенная функция openPhotoset() не решает после цикла, но раньше. Я читал и видел примеры $ .when(), используемые в цикле, заполняя массив отсрочками и проверяя с помощью $ .when, но я, похоже, ужасно терпеть неудачу. Это решение, в котором я нуждаюсь, или есть еще один путь к спасению? ;)

Я хочу выполнить различные функции после того, как все вызовы в openPhotoset() завершены.

 function openPhotoset(photosetId) { 
      var currentPhotoset = [], 
       deferred = $.Deferred(); 

      _requestPhotosOfSet(photosetId).done(function(data){ 
       $(data.photoset.photo).each(function(i, photo){ 
        var objPhoto = {}; 

        objPhoto.id = photo.id; 
        objPhoto.title = photo.title; 
        objPhoto.farm = photo.farm; 
        objPhoto.server = photo.server; 
        objPhoto.secret = photo.secret; 

        // get photo description 
        requestPhotoInfo(photo.id).done(function(data) { 

         objPhoto.description = data.photo.description._content; 
         currentPhotoset.push(objPhoto); 

        }).then(function() { 
         // TODO: renders with each iteration, shouldnt! 
         var template = $('#li-gallery').html(), 
          result = Mustache.render(template, {currentPhotoset:currentPhotoset}); 

         showGallery(); 
         _$fyGallery.find('.gallery-list').html(result); 

         deferred.resolve(); 

        }); 
       }); 

      }); 

      return deferred; 

     } 

Answer 1

Вы можете сделать это, изменив .done() на .then() в нескольких местах и ​​немного переставив вещи - ну совсем много.

Я думаю, что вы, вероятно, искал что-то вроде этого:

function openPhotoset(photosetId) { 
    return _requestPhotosOfSet(photosetId).then(function(data) { 
     var promises = $(data.photoset.photo).map(function(photo) { 
      return requestPhotoInfo(photo.id).then(function(data) { 
       return { 
        id: photo.id, 
        title: photo.title, 
        farm: photo.farm, 
        server: photo.server, 
        secret: photo.secret, 
        description: data.photo.description._content 
       }; 
      }); 
     }).get();//.get() is necessary to convert a jQuery object to a regular js array. 
     return $.when.apply(null, promises).then(function() { 
      var template = $('#li-gallery').html(), 
       result = Mustache.render(template, { 
        currentPhotoset: Array.prototype.slice.apply(arguments) 
       }); 
      showGallery(); 
      _$fyGallery.find('.gallery-list').html(result); 
     }); 
    }); 
} 

Основное отличие заключается в создании массива обещаний, в отличие от массива объектов фотографии и позволяя обещания передавать данные. Это позволяет $.when() отменить обратный вызов, когда выполняются все обещания, т. Е. Когда объекты данных были составлены для всех фотографий в наборе.

Обратите внимание на использование .map() вместо .each(), что упрощает создание promises.

И, наконец, общее обещание, возвращенное openPhotoset(), позволяет любые действия, которые необходимо предпринять по завершении всего процесса. Просто цепь .then().

openPhotoset(...).then(function() { 
    // here, do whatever 
}); 

---

EDIT

Общая картина, вероятно, легче понять, если внутренние работы вытащены и перефразировать как именованные обещание функций, возвращающих - getPhotoInfoObject() и renderData().

function openPhotoset(photosetId) { 
    function getPhotoInfoObject(photo) { 
     return requestPhotoInfo(photo.id).then(function(data) { 
      //$.extend() is much less verbose than copying `photo`'s properties into a new object longhand. 
      return $.extend(photo, {description: data.photo.description._content}); 
     }); 
    } 
    function renderData() { 
     var template = $('#li-gallery').html(), 
      currentPhotoset = Array.prototype.slice.apply(arguments), 
      result = Mustache.render(template, { 
       currentPhotoset: currentPhotoset 
      }); 
     showGallery(); 
     _$fyGallery.find('.gallery-list').html(result); 
    } 
    // With the inner workings pulled out as getPhotoInfoObject() and renderData(), 
    // the residual pattern is very concise and easier to understand. 
    return _requestPhotosOfSet(photosetId).then(function(data) { 
     var promises = $(data.photoset.photo).map(getPhotoInfoObject).get(); 
     return $.when.apply(null, promises).then(renderData); 
    }); 
} 

Answer 2

Я был настолько ослеплен defereds и $ .when функция, я не заметил, все, что мне было нужно, чтобы создать счетчик и отсчитывать каждый раз, когда requestPhotoInfo было сделано, и после визуализации HTML