JavaScript - 每n秒更新元素innerHTML

Question

使用 JsFiddle here ，我需要每隔 1 秒使用 100 个元素数组中的值依次更改 div 的innerHTML。我使用循环来迭代数组的元素，然后使用 setTimeout 每 1000 毫秒更新一次 #number 的innerHTML。然而我看到的是该元素在 1000 毫秒后立即更新。

let num = 100
let data = [];

for (let i = 0; i < num; i++) {
  data.push(Math.random() * 100);
}
console.log(data);

function loadScript(){
    console.log(`Calling loadScript`);
    let elm = document.getElementById("number");
    for(let i = 0; i < data.length; i++){
     setTimeout(() => {
        console.log(`Setting innerHTML as ${data[i]}`);
        elm.innerHTML = data[i].toString();
     },1000);
  }
}

loadScript();

Answer 1

该循环将所有项目的超时设置为1000ms，并且它们都在此时执行。一个简单的解决方案是将超时乘以 i:

 setTimeout(() => {
        console.log(`Setting innerHTML as ${data[i]}`);
    elm.innerHTML = data[i].toString();
 }, i * 1000);

const colorsRainbow = ["rgb(120,28,129)","rgb(64,67,153)","rgb(72,139,194)","rgb(107,178,140)","rgb(159,190,87)","rgb(210,179,63)","rgb(231,126,49)","rgb(217,33,32)"];
let num = 100
let data = [];

for (let i = 0; i < num; i++) {
  data.push(Math.random() * 100);
}
console.log(data);

let elm = document.getElementById("number");

function loadScript(){
	console.log(`Calling loadScript`);
	for(let i = 0; i < data.length; i++){
     setTimeout(() => {
    		console.log(`Setting innerHTML as ${data[i]}`);
      	elm.innerHTML = data[i].toString();
     }, i * 1000);
  }
}

loadScript();

<div id="map" style="width: 500px; height: 500px;">
  <h1>Color Changer</h1>
  <div id="number"></div>
</div>

但是，第一个解决方案同时为数组的每个元素创建一个计时器。更好的解决方案是创建一个计时器，完成后创建另一个计时器:

function loadScript() {
  setTimeout(() => {
    console.log(`Setting innerHTML as ${data[i]}`);
    elm.innerHTML = data[i].toString();

    // increment i, and if i is less then the data length, call loadScript() again
    ++i < data.length && loadScript();
  }, 1000);
}

const colorsRainbow = ["rgb(120,28,129)","rgb(64,67,153)","rgb(72,139,194)","rgb(107,178,140)","rgb(159,190,87)","rgb(210,179,63)","rgb(231,126,49)","rgb(217,33,32)"];

let num = 100
let data = [];

for (let i = 0; i < num; i++) {
  data.push(Math.random() * 100);
}
console.log(data);

let elm = document.getElementById("number");
let i = 0;

function loadScript() {
  setTimeout(() => {
    console.log(`Setting innerHTML as ${data[i]}`);
    elm.innerHTML = data[i].toString();

    // increment i, and if i is less then the data length, call loadScript() again
    ++i < data.length && loadScript(); 
  }, 1000);
}

loadScript();

<div id="map" style="width: 500px; height: 500px;">
  <h1>Color Changer</h1>
  <div id="number"></div>
</div>