JQuery.Load(）是否将标记呈现和Java脚本作为单个阻塞调用执行

Does JQuery.Load() execute markup rendering and Java Script as a single blocking call

本文关键字：脚本 Java 单个阻 执行 调用 Load 是否 JQuery      更新时间：2023-09-26

我有一个问题，关于在使用JQuery的.load（）.进行Ajax调用后，将带有JavaScript的html插入DOM

假设以下示例html部分：

<script>$(document).ready(function(){var e = $('#'+'@Servergenerated');})</script>
<div id='@Servergenerated'>Test Element</div>

如果我通过Ajax调用返回上面的部分，并使用JQuery的load（）函数将结果插入DOM中——标记呈现和脚本都会作为阻塞调用执行吗？这意味着，由于.load（）在JavaScript可用的单个线程上执行，它是否会确保标记渲染和JavaScript执行都会在调用同一主页上的其他JavaScript之前完成？

Ajax请求通过$("#someElement").load(..) 启动

在上面的情况下，我可以一直假设JS总是与正确的html配对吗（这样JS将根据页面上当前定义的ID执行）

但是，使用.load（）和.html（）.之间有区别吗

通常，我使用$.get来检索数据，然后使用.html（）将其插入DOM。然而，这段代码在第三方库中，而不是uisng.load（）。。

当您使用$().load(url,fn)时，由于$().load(url,fn)执行异步http请求以获取内容，因此在将html附加到页面之前，将执行该行后面的代码。请参阅末尾的示例。

另一件需要记住的重要事情是，对于$().load(url,fn)，如果返回的html包含javascript，则该javascript可能会在页面上存在内容之前执行，导致插件无法正确初始化。这就是为什么强烈建议您不要使用$().load(url,fn)引入包含脚本的内容。

示例：

console.log(1)
$("#div1").load("page1.html",function(){
    console.log("4 maybe 5")
});
console.log(2)
$("#div2").load("page2.html",function(){
    console.log("5 maybe 4")
});
console.log(3)

在上面的例子中，日志1、2和3按照这个顺序发生，但4和5可能会交换位置，这取决于哪个ajax请求完成得最快。除了在成功请求div1的内容时不使用$().load(url,fn)或请求div2的内容之外，没有其他方法可以避免这种情况。

相关文章：