Javascript請求頁面變慢或凍結

Question

典型代碼在執行javascript請求時會顯示此代碼。 javascript速度慢或導致頁面凍結

length = dealerCards.length;

for (dealerCount = 0; dealerCount < length; dealerCount++) {
  newCard = dealerCards[dealerCount]
  var cardToDisplay = newCard.cardFaceDown;

  dealerIdName = 'BD';
  dealerIdName = dealerIdName + dealerCount.toString();
  fileNameCard = '<img  width="80" height="128" src="game/images/' + (cardToDisplay.trim()) + '" alt="Card"/>';
  document.getElementById(dealerIdName).innerHTML = fileNameCard;
}

Answer 1

您正在遍歷數組，並且在每次迭代中嘗試將圖像加載到頁面中，但是實際上您最終要顯示頁面中的最后一張圖像，因為您要在循環的最后一行中將fileNameCard分配給innerHTML 。塊。

在循環修改DOM時，所需的時間與數組dealerCards的長度成正比。

相反，如果要顯示所有圖像，請嘗試先將標簽推入數組，然后通過加入元素將其分配給innerHTML 。

var htmlArray = [];

for ( ... ) {
  // ... code truncated for brevity
  htmlArray.push(fileNameCard);
} 

document.getElementById(dealerIdName).innerHTML = htmlArray.join('');

由於一次更新DOM所需的時間將大大減少。 另一方面，如果目的是僅將最后一個圖像分配給innerHTML ，則應從循環塊中刪除此行：

document.getElementById(dealerIdName).innerHTML = fileNameCard;

並在循環結束時分配它：

var fileNameCard = // get the last element of the array and prepare the tag here
document.getElementById(dealerIdName).innerHTML = fileNameCard;