Javascript 等到<；脚本>；标记已完成加载以执行另一个<；脚本>；标签，在jQuery模式内？

我们正在加载一个带有jQuery

.modal（）

的HTML页面

在HTML页面中，它执行以下操作：

<script src="load a .js file from some external domain"></script>
<script>
  $(document).ready(function() {
    console.log('Trying to call function...');
    function_call_defined_in_external_domain_js_file();
  });
</script>

$（文档）.ready（函数（）{
log（'试图调用函数…'）；
函数调用在外部域中定义的函数；
});

如果您也尝试过不使用doc ready函数（并且希望不必依赖jQuery）：

log（'试图调用函数…'）；
函数调用在外部域中定义的函数；

问题是，无论出于何种原因，

函数调用\u在\u external\u domain\u js\u file（）中定义的\u试图在初始的
加载和执行之前执行

我可以通过将console.log（）调试添加到这两个脚本来验证这一点，最终在Chrome控制台中得到如下结果：

正在尝试调用函数

远程标记中的代码现在正在执行

我所期望的正好相反：

远程标记中的代码现在正在执行

正在尝试调用函数

有人能解释为什么会发生这种情况，以及我能做些什么来避免它吗
 ready函数保证在加载DOM时运行


出于您的需要，您可能应该在load事件中运行您的函数

您正在设置竞争条件，因为标记是异步加载的。当浏览器看到标记时，它开始在另一个线程中下载源代码，并继续解析页面的其余部分。因此，除非下载速度惊人地快，否则即使有
$（document）.ready
，函数定义也不会及时存在

您需要的是由函数定义触发的回调

var function_call_defined_in_external_domain_js_file = function() {
    //do stuff here
}
// more code here if you want
call_me_when_function_is_ready_to_run ();
//end of file

在您的html页面中：

<script>
    var call_me_when_function_is_ready_to_run = function() {
        console.log('Trying to call function...');
        function_call_defined_in_external_domain_js_file();
    };
</script>
<script src="load a .js file from some external domain"></script>


当函数准备好运行=函数（）时调用变量{
log（'试图调用函数…'）；
函数调用在外部域中定义的函数；
};

请注意，HTML中的脚本顺序必须更改，因为回调必须在潜在调用之前定义。
您可以使用等待js执行的内容

像这样：

<script>
    // Check if a name is defined
    var isModuleDefined = 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;
    };



    var runWhenReady = function(){
        // Wait for the availability of the function
        if (!isModuleDefined("function_call_defined_in_external_domain_js_file")){
            setTimeout(runWhenReady, 50);
            return;
        }
        console.log('Trying to call function...');
        function_call_defined_in_external_domain_js_file();
    };
    runWhenReady();

</script>


//检查是否定义了名称
var isModuleDefined=函数（moduleName）{
变量字段=moduleName.split（'.'），cur=window；
对于（VARI=0；我在
标记后添加
）.ready（function（）{console.log（'Trying call function…'）；function_call_defined_in_external_domain_js_file（）.ready在DOM就绪时执行，而不是在加载资源时执行。请签出getScript（）取而代之的是：@herezy我想也许我的措辞很糟糕——最终我希望能够在没有jQuery的情况下做到这一点，并确保它仍然有效。所以我在这里寻找最通用的解决方案。我编辑了这篇文章以更清楚地反映这一点。@herezy我也不是clera how getScript（）可能会有帮助。该脚本的回调会在加载后触发，但可能会在执行之前触发，这与现在发生的情况相同。根本不一样。您的脚本现在甚至不会在“a.js”之后执行getScript可能值得探索，因为它支持a.js和内联脚本之间的关系，这是您现在根本没有的。它不是一个确定的完整答案（否则它将作为答案发布），只是一个普通的指针。特别是因为我假设你对a.js的内容几乎没有控制权，因为这是解释为什么你的代码以一种奇怪的不方便的方式组织的唯一原因。你是想在那里发布两个单独的链接，还是两次相同的链接…？脚本元素被阻塞了。在加载和重新加载之间切换ady不应该有什么不同。你确定吗？我一直想知道这是不是真的需要，或者这只是一种常见的做法，但我从来没有找到一个确定的来源。如果执行也需要在继续之前完成。是的。有
延迟
和
异步
属性浮动来改变behaviour，但如果它们没有阻止，
document.write
将无法工作。脚本元素不会异步加载（对它们的http请求可能是异步的，但加载时DOM解析会被阻止）
<script>
    // Check if a name is defined
    var isModuleDefined = 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;
    };



    var runWhenReady = function(){
        // Wait for the availability of the function
        if (!isModuleDefined("function_call_defined_in_external_domain_js_file")){
            setTimeout(runWhenReady, 50);
            return;
        }
        console.log('Trying to call function...');
        function_call_defined_in_external_domain_js_file();
    };
    runWhenReady();

</script>