确保异步脚本的回调

时间:2015-11-19 14:57:44

标签: javascript html html5 asynchronous

我必须加载一个对于显示正文并不重要的第三方脚本(为简单起见,它会在" .red" divs上添加红色背景)。

<script src="redify.js" async defer></script>

我需要在加载脚本后执行function myRedify(){ $(".red").redify(); }

脚本很大,需要很长时间(比如3秒)加载,但一旦完成,我需要看到我的.red div变成红色。

<script src="redify.js" async defer onload="myRedify()"></script>

这是推荐的方法吗?

说明

  • redify.js是我无法修改的第三方脚本
  • 我不介意div如果不立即变成红色,但是在延迟之后(当脚本加载时,3秒钟 - 好的)

1 个答案:

答案 0 :(得分:0)

你的方法是有效的,并且它具有优点。推荐吗?也许。 你的方法有一些优点和一些缺点:

  • 性能:立即开始加载redify脚本
  • 可读性:只看HTML,它显而易见的是
  • 缺点是,如果您要添加另一个库(例如:blueify.js),则必须复制该机制。

现在,您的代码通过myRedify函数紧密耦合。您可以通过构建简单的require策略来解耦它:

var libraries = {
    redify: "redify.js",
    blueify: "blueify.js"
};
var lib_bookkeep = {};

function require(library_name, callback) {
    if (lib_bookkeep[library_name]) {
         if (lib_bookkeep[library_name].status === "loaded") {
             callback();
         } else {
             lib_bookkeep[library_name].elem.addEventListener("load", callback);
         }
    } else {
        var script = document.createElement("script");
        script.src = libraries[library_name];
        script.addEventListener("load", function () {
            lib_bookkeep[library_name].status = "loaded";
        });
        script.addEventListener("load", callback);
        document.head.appendChild(script);
        lib_bookkeep[library_name] = {
            elem: script
            status: "loading"
        }
    }
}

require("redify", function () {
    $(".red").redify();
});

require("redify", function () {
    $(".also-red").redify();
});

require("blueify", function () {
    $(".blue").redify();
});
require("blueify", function () {
    require("redify", function () {
        $(".purple").redify().blueify();
    });
});

这允许您扩展您拥有的库,并允许您任意使用它们。这是我推荐的方法。但是,如果您只有一次这样的实例,则可能会发现它与asynch/deferonload一样。