javascript - 判断多个 onLoad 事件何时在 javascript 中完成

Question

我必须加载两个 api。加载时调用的 YouTube apionYouTubePlayerReady和加载时调用的 SoundManager 的另一个 api soundManager.onready(...)。我在每个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

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

使用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设置为布尔值，然后针对那些进行测试$(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/

谢谢