Javascript：原子性/浏览器视图与DOM之间的相互作用

Question

我有两个特定的Javascript问题，可能由一个一般性答案回答。 请随时提出相应的一般性问题，我很难表达自己的意思。

• 当我在单个Javascript回调中操作多个DOM元素时，视图是否可能通过每个单独的操作“实时”更新，或者在回调返回后自动更新？

• 当用户在短时间内单击HTML元素两次，并且相应的单击处理程序禁用了HTML元素时，是否可以保证不会两次执行该处理程序？

Answer 1

优先地，我对此没有标准的引用。 这完全是我的经验。

我从未注意到Javascript实时执行时可见像素的更新。 我怀疑它们不会在浏览器的标准操作期间-调试可能会出现异常。 但是，我观察到在单个函数调用的顶部和底部之间的DOM元素上发生了同步重排计算，但是这些重排计算从未到达像素缓冲区（我注意到）。 这些似乎是同步发生的。

function foo() {
    $('#myElement').width(); // 100
    $('#myElement').parent().width(); // 150
    $('#myElement').css('width', 200);
    $('#myElement').width(); // 200
    $('#myElement').parent().width(); // 250
}

关于在点击处理程序中被禁用的元素的多次点击，我怀疑第二次点击将不会触发。 我相信，当操作系统收到点击事件时，它将把它传递给浏览器，并将其放入队列中。 该队列由执行Javascript的同一线程提供服务。 操作系统单击事件将保留在队列中，直到Javascript完成执行为止，此时将其删除，包装为浏览器单击事件，并在DOM中冒泡。 此时，该按钮将已经被禁用，而click事件将不会激活它。

我猜像素缓冲区在屏幕上被绘制为同一线程的另一个操作，尽管我可能会误会。

这是基于我在其他地方引用和引用过的模糊的标准记忆。 我没有任何链接。

Answer 2

第一弹：更新将是实时的。 例如，将以下函数附加到onclick处理程序：

function(){
    var d = document.getElementById("myelement") 
    d.setAttribute("align", "center")
    d.setAttribute("data-foo","bar")
    d.setAttribute("data-bar","baz")
}

现在将其加载到浏览器中，在第一行上设置一个断点。 触发事件并在观看DOM的同时逐行浏览。 更新将实时进行，不会一次全部发生。

如果您希望它们以原子方式发生，则需要克隆有问题的DOM元素，在克隆上进行更改，然后用克隆替换原始元素。 克隆的元素仍在实时更新，但是用户可见的效果是原子的。

第二个项目符号：如果在元素被禁用之后出现了第二个click事件，那么是的，您将不会获得第二个回调。 但是，如果第一次单击和禁用调用之间存在任何延迟（例如，需要执行某种冗长的检查以确定是否应禁用该元素），并且第二次单击发生在该延迟中，则会触发回调第二次。 浏览器无法知道给定脚本中多次单击事件不是可接受的行为。

Answer 3

所有脚本执行都在同一线程中进行。 因此，您永远不会有同时执行的操作，也不必担心元素的并发修改。 这也意味着您不必担心在当前执行单击处理程序时将其触发。 但是，这并不意味着他们无法在脚本完成后立即再次将其触发。 执行速度可能如此之快以至于无法区分。