Скажите, когда несколько событий onLoad были завершены в JavaScript

Question

Мне нужно загрузить два apis. API-интерфейс YouTube, который вызывает onYouTubePlayerReady, когда он загружен, и другой API-интерфейс для SoundManager, который вызывает soundManager.onready(...), когда он загружен. Я делаю много вещей в каждой из этих ready функций для подготовки сайта. Тем не менее, мне также нужно знать, когда оба завершены, чтобы я мог сделать больше инициализации, которые требуют полной загрузки обоих. Любая идея, как иметь функцию, которая вызывается при вызове обеих этих ready функций?

Answer 1

Используйте обратный вызов для них обоих.

var callback = (function(){

    var count = 0;

    return function(){
         count++;
         if(count === 2){
            //both ran and do something
         }
    }

})();

Затем в конце обеих загрузок просто выполните:

callback();

Дело в том, что оператор if будет выполняться только во второй раз, когда вызывается эта функция.

Демонстрация небольшой скрипки: http://jsfiddle.net/maniator/2X8rF/

Answer 2

Используя jQuery deferred , вы можете создавать обещания для каждой функции готовности и комбинировать их с jQuery.when , чтобы инициировать финальное действие. Например

function promiseYoutube() {
    var dfd = $.Deferred();
    window.onYoutubePlayerReady = function() {
        console.log("Youtube");
        dfd.resolve();
    };
    return dfd.promise();
}

function promiseSoundManager() {
    var dfd = $.Deferred();
    window.soundManager.onready = function() {
        console.log("SoundManager");
        dfd.resolve();
    };
    return dfd.promise();
}

$.when( promiseYoutube(), promiseSoundManager() ).then(function(){
    console.log('Youtube+SoundManager');
});

И скрипка, имитирующая эти обратные вызовы http://jsfiddle.net/nikoshr/hCznB/

Answer 3

Вероятно, есть лучший способ использования Defered, но это просто и должно работать.Просто следите за тем, что загружено, а что нет.

var status = {
  youtube: false,
  sound: false
};

var loaded = function() {
  if (!status.youtube) return;
  if (!status.sound) return;

  // load stuff!
};

var onYoutubePlayerReady = function() {
  status.youtube = true;
  loaded();
};

soundManager.onready = function() {
  status.sound = true;
  loaded();
}

Answer 4

Просто установите пару флагов:

var aDone = false;
var bDone = false;

function whenADone(){
  // do your other stuff

  aDone = true;

  if(bDone) whenBothDone();
}

function whenBDone(){
  // do your other stuff

  bDone = true;

  if(aDone) whenBothDone();
}

Answer 5

Если вы используете jQuery, посмотрите на deferred:

http://www.erichynds.com/jquery/using-deferreds-in-jquery/

http://api.jquery.com/category/deferred-object/

Спасибо

Answer 6

Вы могли бы оба из ваших readys установить логическое значение true, а затем протестировать их $(document).ready(function () { if (youTube === true && soundManager === true) { // Do stuff }});