Question

本周我在清理一些旧的JavaScript代码时发生了一件有趣的事。当我拿出一些慢速代码时，页面开始在通过Ajax调用包含的文件中的代码上引用参考错误。

以下是（大大简化）问题的示例。直接请求时，第一个文件将正常工作。但是当通过Ajax调用时，已经发生了文档就绪事件，因此内部代码立即执行。 Chrome会抛出错误，例如：“VM1414：2未捕获的ReferenceError：未定义them_log”

<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.js"></script>
<script>
    $(document).ready(function() { 
        they_log("Be alerted");
    });
</script>
<!-- Two separate script tags prevent hoisting -->
<script>
function they_log($string) {

    console.log($string);
}
</script>
</body>
</html>

但是，如果取消注释下面的评论“警告”行，则Chrome或Firefox中不会引用参考错误（尽管它们仍然出现在Safari中 - 除非您让模态对话框挂起几秒钟。）

<!doctype html>
<html lang="en">
<head>
  <title>Prototype of reference error issue</title>
</head>

<body>
    <div id="place" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.js"></script>

    <script>
        $.get( "http://localhost/path/to/first/file.html", function( data ) {
          $("#place").html(data);
        });
        //alert("I get rid of the reference error");
    </script>
</body>
</html>

我的问题是，警报消息（或包含文件中类似的慢速代码）如何防止发生引用错误？

我特别感兴趣的是，无论发生什么事情让代码执行都没有错误，都可以指望一致地工作（至少在Chrome和Firefox中），或者是否存在类似竞争条件的情况可能会失败间歇。

Answer 1

我观察到的是在文档准备就绪之前运行alert，并且阻止文档就绪，直到警报对话框关闭。小提琴：https://jsfiddle.net/24pg3yzk/

显示警告对话框时，Ajax请求及其完成处理程序$("#place").html(data); 可能已完成。是的，这是竞争条件。

是标准还是一致的行为？我不知道。我认为这是有道理的，因为警告“对话框是模态窗口 - 它们阻止用户访问程序界面的其余部分，直到对话框关闭”（source），但没有任何内容可以从jQuery中确认它{ {3}}

引用包含文件中引发的错误...除非调用文件包含慢速代码

1 个答案: