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的同一线程提供服务。 OS 点击事件将保留在队列中，直到Javascript完成执行，此时它将被删除，包装为浏览器点击事件，并通过DOM冒泡。此时，该按钮已被禁用，点击事件不会激活它。

我猜测像素缓冲区在屏幕上绘制为同一个线程的另一个操作，虽然我可能会弄错。

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

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元素，对克隆进行更改，然后将原始元素替换为克隆。克隆的元素仍在实时更新，但用户可见的效果是原子的。

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

Answer 3

所有脚本执行都发生在同一个线程中。因此，您永远不能同时执行操作，也不必担心元素的并发修改。这也意味着您不必担心当前执行一个点击处理程序时会被触发。但是，这并不意味着当您的脚本完成时它们不能立即再次触发它。执行速度可能太快，无法区分。

Javascript：浏览器视图和DOM之间的原子性/交互

3 个答案: