Question

无论如何确定外部脚本何时加载并执行？我知道我们可以使用onload事件确定何时加载，如下所示：

<script src=script.js async></script>
<script>
document.getElementsByTagName('script')[0].onload = function(){...}
</script>

但是加载和执行呢？

Answer 1

这是一个使用jQuery deferreds和$ .ajax方法加载多个JS脚本的方法。加载BOTH JS文件时将打印控制台上的消息。执行

演示http://jsbin.com/qumojobawe/2/edit?html,js,output

var deferreds = [];

var jsFiles = ['https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-debug.js', 'https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.js'];

$.each(jsFiles, function(idx, url) {
  deferreds.push(jQuery.ajax({
    type: "GET",
    url: url,
    dataType: "script",
    cache: true
  }));
});

deferreds.push($.Deferred(function(deferred) { $(deferred.resolve); }));

$.when.apply(this, deferreds).done(function() {
  console.log("KnockoutJS & MomentJs is loaded", ko, moment);
});

如果脚本加载其他组件并且没有立即初始化，则可以使用以下wait（）方法，该方法将在指定的时间间隔内重新检查，等待直到满足某个条件

var wait = function (condFunc, readyFunc, checkInterval) {
    var checkFunc = function () {
        if (condFunc()) {
            readyFunc();
        }
        else {
            setTimeout(checkFunc, checkInterval);
        }
    };
    checkFunc();
};

例如，下面的代码将检查当前时间秒数何时以每10毫秒结束为零，并在条件为真时执行函数：

wait(
function() { return new Date().getSeconds() % 10 == 0 }, 
function() { console.log("this will be called when time is 0, 10, 20, 30, etc seconds", new Date()); }, 
10);

演示http://jsbin.com/fayenigixo/1/edit

Answer 2

如果您询问脚本，可以修改，那么您可以在外部脚本中编写回调函数。您可以在此处详细了解：http://www.w3schools.com/jquery/jquery_callback.asp

如果您询问外部脚本，无法修改，那么您应该阅读API文档（如果存在）。例如，您可以在此处找到YouTube的API文档：https://developers.google.com/youtube/js_api_reference#Functions

Answer 3

您可以检查名称空间是否已加载＆＃34;使用这样的方法：

var isNamespaceDefined = function(moduleName) {
    var fields = moduleName.split('.'), cur = window;

    for(var i=0; i<fields.length; i++){
        if(typeof cur[fields[i]] === "undefined") return false;
        cur = cur[fields[i]];
    }
    return true;
};

用法：isNamespaceDefined("my.module.function")

结合使用setTimeout来检查加载：

var doWhenReady = function(){
    if(isNamespaceDefined("my.function")){
        // redefining the function;
        var _myFunction = my.function;

        my.function = function(){

            // do things Before the call

            _myFunction.apply(null, arguments);

            // do things After the call

        };
    }
    else{
        setTimeout(doWhenReady , 100);
    }
}

一个简单的解决方案，但可能会添加一些时间检查和错误回调

有没有办法检测外部js何时加载并执行？

3 个答案: