Question

我们正在使用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>

如果没有doc ready函数也尝试过（并且更喜欢不必依赖jQuery）：

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

问题在于，无论出于何种原因，function_call_defined_in_external_domain_js_file()尝试在初始<script>加载和执行之前执行。

我可以通过向两个脚本添加console.log（）调试来验证这一点，我最终在Chrome控制台中使用了这样的内容：

试图调用函数...

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

在哪里 - 正如我所期望的那样恰恰相反：

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

试图调用函数...

任何人都可以解释为什么会这样，以及我可以做些什么来避免它？

Answer 1

你可以使用等待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>

当我尝试加载一个大的压缩js文件并且在解释js之前调用回调方法时，我使用此方法

Answer 2

当 DOM 加载时，保证ready函数运行。

http://api.jquery.com/ready/

对于你想要的，你应该在load事件中运行你的函数

http://api.jquery.com/load/

Answer 3

您正在设置竞争条件，因为标记是异步加载的。当浏览器看到标记时，它开始在另一个线程中下载源并继续解析页面的其余部分。因此，除非下载速度惊人地快，否则即使使用$(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>

请注意，脚本顺序必须在HTML中更改，因为必须在可能调用之前定义回调。

等到<script>标记完成加载，在jQuery模式中执行另一个<script>标记？</script>

3 个答案: