避免DOM變化被合并在一起

我的專案包括一個函式，該函式在較弱的設備上可能需要明顯的時間才能完成，因此我希望在這個程序中向用戶顯示一個加載圖示。該函式執行了大量的字串連接，然后向 DOM 進行了一次寫入。

我的代碼看起來是這樣的：

function onclick() { showLoader（）。 longDOMWriteCall（）。 hideLoader()。 } function showLoader（） { loader.classList.remove（"hidden"）。 } function hideLoader（） { loader.classList.add("hidden"/span>)。 }

似乎由于某些原因，瀏覽器同時運行了show和hide的呼叫，以及函式的寫入呼叫，導致加載器首先沒有出現，盡管代碼是同步的。即使使用承諾使操作成為異步，也會產生同樣的結果：

function onclick() {
    showLoader（）。
    
    longDOMWriteCall().then（hideLoader）。

我如何阻止這種情況的發生，例如加載器出現，函式執行其功能，然后加載器再次消失？這種影響在高端設備上并不明顯，但我測驗的低端設備可能需要半秒才能完成呼叫。

謎題。https://jsfiddle.net/Emosewaj/u07o8ybj/33/

uj5u.com熱心網友回復：

用setTimeout()異步運行代碼。

在下面的例子中，我有一個很長的超時時間，所以在正常的電腦上可以看到效果。你可以在真實的設備上使用0。

const loader = document. getElementById("loader")。
const container = document.getElementById("container") 。

function clickFuncAsync(/span>) {
  showLoader（）。

  longDOMWriteCallAsync().then（hideLoader）。
}

function longDOMWriteCallAsync（） {
  console.log("Running async"/span>)。
  return new Promise(resolve =>； {
    setTimeout(() =>  {
      let html = ""/span>;

      for (let i = 0; i < 5; i  ) {
        html  = "<div>Content</div> "。
      }

      container.innerHTML = html;
      resolve（）。
    }, 1000）。)
  });
}

function showLoader（） {
  loader.classList.remove（"hidden"）。
}

function hideLoader（） {
  loader.classList.add("hidden"/span>)。
}

#loader {
  height: 32px;
  width: 32px;
}

#loader.hidden {
  display: none;
}

< button onclick="clickFuncAsync()">/span>
    運行異步
</button> 

< div id="loader" class="hidden">
  <img src="https://picsum.photos/32/32"/span>>
</div>/span>

<div id="container"> 
</div>/span>

uj5u.com熱心網友回復：

const loader = document. getElementById("loader")。
const container = document.getElementById("container") 。

function clickFunc（） {
  showLoader（）。
  setTimeout(（）=> {
    longDOMWriteCall（）。
    hideLoader（）。
  }, 1)
}

function clickFuncAsync（） {
  showLoader（）。
  setTimeout(（）=> {
    longDOMWriteCallAsync()
    hideLoader()
  }, 1)
}

function longDOMWriteCall（） {
    console.log("Running sync"/span>)。
    let html = "";
    for (let i = 0; i < 50000; i  ) {
        html  = "<div>Content</div> "。
    }
    container.innerHTML = html。
}

function longDOMWriteCallAsync（）{
    console.log("Running async"/span>)。
    return new Promise(resolve => /span> {
        let html = ""/span>;
        for (let i = 0; i < 50000; i  ) {
            html  = "<div>Content</div> "。
        }
        container.innerHTML = html;
        resolve（）。
    });
}

function showLoader（） {
  loader.classList.remove("hidden"/span>)。
  console.log('sdfds' )
}

function hideLoader（） {
console.log('vvvv'/span>)
    loader.classList.add（"hidden"）。
}

#loader {
    height: 32px;
    width: 32px;
}

#loader.hidden {
    display: none;
}

< button onclick="clickFunc()" >
    運行
</button>/span>運行
<button onclick="clickFuncAsync()">/span>
    運行異步
</button> 
< div id="loader" class="hidden">
    <img src="https://picsum.photos/32/32"/span>>
</div>/span>


<div id="container"> 
</div>/span>

你可以嘗試用超時的方法：

標籤：

上一篇：在本地存盤和可見的DOM上存在的元素的查詢選擇器無效

下一篇：附加物件而不是html