在javascript中完成多个onLoad事件时请告知

Question

我必须加载两个apis。 YouTube API在加载时调用onYouTubePlayerReady，另一个用于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(); 

中的事情，如果语句只会在第二次运行此函数I S调用。

小提琴演示：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

你可以让您的两个readys设置一个布尔值true，那么对那些测试$(document).ready(function() { if (youTube === true && soundManager === true) { // Do stuff }});

Answer 4

有可能是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 5

如果使用jQuery，来看看延期：

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

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

感谢

Answer 6

使用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/