Javascript:浏览器 View 和 DOM 之间的原子性/交互

Question

我有两个具体的 Javascript 问题，一个笼统的答案可能会回答这些问题。请随时提交相应的一般性问题——我很难表达自己。

• 当我在单个 Javascript 回调中操作多个 DOM 元素时， View 是否可能随着每个单独的操作“实时”更新，或者在回调返回后以原子方式更新？

• 当用户在短时间内两次点击 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 冒泡。此时按钮已经被禁用，点击事件也不会激活它。

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

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