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

所有腳本執行都在同一線程中進行。 因此，您永遠不會有同時執行的操作，也不必擔心元素的並發修改。 這也意味着您不必擔心在當前執行單擊處理程序時將其觸發。 但是，這並不意味着他們無法在腳本完成后立即再次將其觸發。 執行速度可能如此之快以至於無法區分。