javascript - 在 JavaScript 中异步加载外部脚本

Question

这是我用 JS 编写的第一个模块，我想确保我做对了。 这将是一个简单的画廊模块，但我希望它也能够显示 youtube 和 vimeo 电影。 在我的模块中，我有一个名为 init() 的函数。在我首先展示画廊之前，我想添加所有必要的库，比如 youtube iframe api 和 vimeo js api。 只有在它们加载后我才想显示画廊。 所以我的模块看起来像这样:

myModule = {};
myModule.isYoutubeApiLoaded = false;
myModule.isVimeoApiLoaded = false;
myModule.controller;
myModule.init = function (){
   myModule.loadYoutubeapi();
   myModule.loadVimeoApi();
   myModule.startController();
}

现在 startController 函数如下所示:

myModule.startController  = function (){
   myModule.controller = setInterval(function(
       if (myModule.isYoutubeApiLoaded && myModule.isVimeoApiLoaded ) {
             myModule.buildGallery();
             clearInterval(myModule.controller);
        }
   ), 5);
}

在 loadYoutubeapi() 和 loadVimeoApi() 中，我在加载脚本时设置给定的标志。 这是一个好方法吗？

Answer 1

不，这不是一个好方法。它会加载 CPU，并且可能会有不必要的 5 毫秒延迟。

更好的方法是向 loadYoutubeapi() 和 loadVimeoApi() 添加回调。一旦他们完成，他们必须调用您的新函数(例如 moduleHasLoaded())，该函数将计算加载的模块。加载完所有内容后，您可以调用 startController()。

它将节省 CPU，并且根本不会有不必要的延迟。

像这样:

myModule = {};
myModule.isYoutubeApiLoaded = false;
myModule.isVimeoApiLoaded = false;
myModule.loaded = false;
myModule.controller;

myModule.loadYoutubeapi = function() {

    /* Do your stuff. */

    myModule.isYoutubeApiLoaded = true;

    myModule.moduleHasLoaded();
}

myModule.loadVimeoApi = function() {

    /* Do your stuff. */

    myModule.isVimeoApiLoaded = true;

    myModule.moduleHasLoaded();
}

myModule.moduleHasLoaded = function() {

    if (!loaded && myModule.isYoutubeApiLoaded && myModule.isVimeoApiLoaded ) {
        loaded = true;
        myModule.buildGallery();
    }

}

myModule.init = function (){
    myModule.loadYoutubeapi();
    myModule.loadVimeoApi();
}