Question

我必须加载两个api。 YouTube api在加载时调用onYouTubePlayerReady，在加载时调用soundManager.onready(...)的另一个api API。我在这些ready函数中做了很多工作来准备网站。但是，我还需要知道两者何时完成，因此我可以进行更多初始化，这需要两者都完全加载。知道如何调用这两个ready函数时调用的函数吗？

Answer 1

对它们使用回调。

var callback = (function(){

    var count = 0;

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

})();

然后在两个onloads的最后只做：

callback();

if语句中的内容只会在第二次运行此函数时运行。

小提琴演示：http://jsfiddle.net/maniator/2X8rF/

Answer 2

只需设置几个标志：

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 3

Deferred可能有更好的方法，但这很简单，应该可行。只需跟踪已加载的内容和未加载的内容。

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

使用jQuery deferred，您可以为每个就绪函数构建promise，并将它们与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 5

您可以让readys将布尔值设置为true然后针对$(document).ready(function () { if (youTube === true && soundManager === true) { // Do stuff }});

进行测试

Answer 6

如果使用jQuery，请查看deferred：

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

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

由于

告诉我们在javascript中完成了多个onLoad事件

6 个答案: