Javascript 确保异步脚本的回调

我必须加载一个第三方脚本，该脚本对于显示主体并不重要（为了简单起见，它在“.red”divs上添加了一个红色背景）

这是推荐的方法吗

备注

• redify.js

  是我无法修改的第三方脚本
• 我不介意div是否不是立即变红，而是在延迟之后（当脚本加载时，3秒-ok）

---

你的方法是有效的，因此它有了梅里特。推荐吗？大概 您的方法有一些优点，也有一些缺点：

• 性能：立即开始重新定义脚本的加载
• 可读性：只要看一下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/defer

和

onload

加载脚本后，它会立即执行，因此您可以将

myPostFunction（）

放在脚本的末尾。@r3wt，OP正在询问推荐的方法！公平地说，他问这是否是推荐的方法，而不是上面的代码是否可行：）@ins0这是唯一可能的方法，除非您使用javascript编程创建脚本，并执行

script.onload=function（）{…

，或者正如@Halcyon所说的，只需调用脚本底部的函数即可。如果脚本B依赖于脚本a，则不要将脚本设为异步。这会带来麻烦。始终以同步方式加载它们。您所说的“添加脚本并在加载后调用任何回调”到底是什么意思这是一个ajax调用吗？@Serge我添加了一个示例实现。我还没有测试过它，但它在理论上应该可以工作。

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

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();
    });
});