javascript - 附加到元素的脚本标记会在 .append() 之后的下一行之前运行吗？

Question

我正在从服务器获取 HTML 文档，并将其存储在变量 data 中, 然后将其附加到 <ul>页面上的元素。这是data看起来像:

<script>
    hasNext = true // global variable
</script>
<li class="result">one</li>
<li class="result">two</li>

然后在页面的主要 Javascript 中，我这样做:

ulElement.append(data);
if (hasNext) {
    ulElement.append(nextPageButton);
}

它似乎有效，但我只是想确保 <script> 中的代码标签将始终在我的 if 之前运行陈述。而且我无法在网上找到有关这种可能的竞争条件的任何信息。想法？

Answer 1

独立于这是否是个好主意....

为了让浏览器解释您动态插入的 DOM，它必须解析您提供的内容。这是一个同步过程(假设您的 JS 不执行任何 AJAX 请求，setTimeouts 等)。来自Google Dev blog :

When the HTML parser encounters a script tag, it pauses its process of constructing the DOM and yields control over to the JavaScript engine; once the JavaScript engine has finished running, the browser then picks up from where it left off and resumes the DOM construction.

这意味着浏览器保证在移动到下一个 JS 命令之前处理和执行脚本标记中的 JS(以及在字符串中添加 DOM):if (hasNext) {... .

在您的示例中，<script> 在哪里并不重要标记与 data 中动态插入的 DOM 的其余部分相关因为 DOM 和该脚本之间没有依赖关系。只要在data , 浏览器将在继续执行 append 之后的行之前处理这些命令.例如。这也行得通

<li class="result">one</li>
<li class="result">two</li>
<script>
    hasNext = true // global variable
</script>

由于您的代码正在检查 append 之后的动态“注入(inject)”变量调用时，变量 ( hasNext ) 保证存在(只要它在 <script> 中的 data 标记中)。

例如:

$( ".test" ).append( "<p>Test</p><script>var globalVariable = 123;" );
$( ".test" ).append( globalVariable );

会写:

<p>Test</p>123

---

最有可能的竞争条件来自某些未指定 hasNext 的服务器交互变量，在这种情况下，代码将使用该变量的假值:

if (undefined) { 
    alert('I won\'t be called'); 
} else { 
    alert('I will be called'); 
}

-或者，风险更大的版本-

你的if (hasNext) { ... }将使用先前调用 append 时该变量的先前值与不同data .这是相当冒险的，可能是避免这种方法的最佳理由。