javascript - 确保异步脚本的回调

Question

我必须加载对显示正文不重要的第三方脚本(为简单起见，它在“.red”div 上添加了红色背景)。

<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 秒 - 好的)

Answer 1

您的方法行之有效，而且值得一提。推荐吗？或许。 您的方法有一些优点和一些缺点:

• 性能:立即开始加载 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();
    });
});

这使您可以扩展现有的库，并可以任意使用它们。这将通过我推荐的方法。但是，如果您只有这个 once 实例，它可能会像您一样使用 asynch/defer 和 onload 来完成它。