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分配给了{ {1}}在循环块的最后一行。

在循环修改DOM时，所需的时间与数组innerHTML的长度成正比。

相反，如果要显示所有图像，请尝试先将标签推入数组，然后通过加入元素将其分配给dealerCards。

innerHTML

由于一次更新DOM所需的时间将大大减少。另一方面，如果打算仅将最后一个图像分配给var htmlArray = []; for ( ... ) { // ... code truncated for brevity htmlArray.push(fileNameCard); } document.getElementById(dealerIdName).innerHTML = htmlArray.join('');，则应从循环块中删除此行：

innerHTML

并在循环结束时分配它：

document.getElementById(dealerIdName).innerHTML = fileNameCard;

Javascript请求页面变慢或冻结

1 个答案: