Issue

Question

我要说的是,我有10 000名随机分类的愤怒。在通过该守则时,我想逐个增加<条码>。如果我这样做的话,那是:

const myArray = [/* 10000 totally random integers! */];
let pos = 0;
while (pos < myArray.length) {
  document.getElementById("unorderedList").innerHTML += `<li>${pos}</li>`;
  pos++;
}
console.log("done!");

It freezes the whole window until it finishes, then it logs everything. How can I make it so the loop adds the number every iteration until it finishes instead of finishing the loop then printing everything? Note: this hypothetical function also needs to interact with a Window created with window.open, so I don t think I can use workers since that interacts with the DOM.

Answer 1

您可使用<代码>requestAnimationFrame。

requestAnimationFrame is a JavaScript method used for smooth and efficient animations on the web.

It schedules a provided function to run before the next repaint, ensuring optimal performance by syncing with the browser s rendering cycle.

Unlike alternatives like setTimeout, it adapts to the screen refresh rate, resulting in visually smoother animations and better resource utilization.

它通常用于点im,用于更新阵地和重塑现场。

我添加以下样本代码。

const myArray = new Array(10000).fill(0).map((_, index) => index);
const batchSize = 30; //you can control speed by this variable
let pos = 0;
const unorderedList = document.getElementById("unorderedList");

const updateDOM = () => {
  const fragment = document.createDocumentFragment();

  while (pos < myArray.length && fragment.children.length < batchSize) {
    const li = document.createElement( li );
    li.textContent = myArray[pos++];
    fragment.appendChild(li);
  }

  unorderedList.appendChild(fragment);

  pos < myArray.length ? requestAnimationFrame(updateDOM) : stop();
};

const start = () => requestAnimationFrame(updateDOM);
const stop = () => console.log("done!");

start();

<div id="unorderedList"></div>

Answer 2

Issue

这是因为浏览器在整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整整

Solution

您可使用

const myArray = [/* 10000 totally random integers! */];
let pos = 0;

function processArrayChunk() {
  const ul = document.getElementById("unorderedList");
  const chunkSize = 50; // adjust it according to your myArray size

  for (let i = 0; i < chunkSize && pos < myArray.length; i++) {
    const li = document.createElement("li");
    li.textContent = myArray[pos];
    ul.appendChild(li);
    pos++;
  }

  if (pos < myArray.length) {
    requestAnimationFrame(processArrayChunk);
  } else {
    console.log("done!");
  }
}

processArrayChunk();

Issue

Solution

友情链接