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

【问题标题】：JavaScript - update element innerHTML every n secondsJavaScript - 每 n 秒更新一次元素 innerHTML
【发布时间】：2017-05-09 16:57:39
【问题描述】：

使用 JsFiddle here，我需要每隔 1 秒使用 100 个元素的数组中的值依次更改 div 的 innerHTML。我正在使用循环遍历数组的元素，然后使用setTimeout 为#numberevery 1000ms 更新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();

【问题讨论】：

标签： javascript

【解决方案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>

【讨论】：

幸好你添加了重新超时。我正要提交这个作为答案；）
谨慎的做法是添加一个 if 以将索引值包装回 0，否则当 i == 100 时这将是一场火车事故
不会的。 ++i < data.length && loadScript(); 在与data.length 比较之前增加i，所以如果i === 100，它不会再次调用loadScript()。

【解决方案2】：

这是一个使用 setInterval 而不是 setTimeout 的版本。我发现 setInterval 比链接 setTimeout 调用要干净一些。

function loadScript() {
  console.log(`Calling loadScript`);
  let elm = document.getElementById("number");
  let i = 0;
  var intervalId = setInterval(() => {
    console.log(`Setting innerHTML as ${data[i]}`);
    elm.innerHTML = data[i].toString();
    i++;
    if (i === data.length) {
      console.log('done');
      clearInterval(intervalId);
    }
  }, 1000);
}

【讨论】：