JavaScript - 每n秒更新一次innerHTML元素

Question

在这里使用JsFiddle ,我需要每隔1s更改一个div的innerHTML,其中包含100个元素的数组中的值.我正在使用循环遍历数组的元素,然后使用每1000ms setTimeout更新innerHTML #number.但是我看到的是元素在1000ms后立即更新.

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

循环将所有项的超时设置为1000毫秒,并且它们都在此时执行.一个简单的解决方案是将超时乘以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>