具有不同时间的for循环中的setTimeout

Question

我有一个不同对象的数组，每个对象包含一个不同值的时间属性。

我想循环这个数组，里面有一个 setTimeout 函数，时间将是每个对象的时间属性。

因此，我想要的结果是

1. 10 秒后，打印第一个对象的名称

2. 20 秒后，打印第二个对象的名称。

3. ...

4. ...

5. 5 秒后，打印最后一个对象的名称。

但是，下面的代码将累计执行 20s，即 time = 5s 时打印 obj 3 & 5，5s 后打印 obj 1，10s 后打印 obj 2 & 4。

const data = [

{name: "Warm up", timeFormat: "00:10", time: 10},

{name: "High interval", timeFormat: "00:20", time: 20},

{name: "Low Interval", timeFormat: "00:05", time: 5},

{name: "High interval", timeFormat: "00:20", time: 20},

{name: "Low Interval", timeFormat: "00:05", time: 5},

]

function renderTimer(data) {

  for (let i = 0; i < data.length; i++) {

    const eachName = data[i].name;

    const eachTime = data[i].time;

    setTimeout(() => {

      console.log(eachName);

    }, eachTime * 1000);

  }

}

renderTimer(data);

我的代码有什么问题？或任何其他方式来实现我想要的结果？

非常感谢！

Answer 1

发生的事情是，程序在 for 循环中竞速，并几乎立即设置了相对于 t=0s 的超时。如果你想使用 setTimeout()，你必须自己累积时间：const data = [{name: "Warm up", timeFormat: "00:10", time: 10},{name: "High interval", timeFormat: "00:20", time: 20},{name: "Low Interval", timeFormat: "00:05", time: 5},{name: "High interval", timeFormat: "00:20", time: 20},{name: "Low Interval", timeFormat: "00:05", time: 5},]function renderTimer(data) {&nbsp; var timing = 0;&nbsp; for (let i = 0; i < data.length; i++) {&nbsp; &nbsp; const eachName = data[i].name;&nbsp; &nbsp; timing += data[i].time;&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; console.log(eachName);&nbsp; &nbsp; }, timing * 1000);&nbsp; }}renderTimer(data);

Answer 2

你可以使用async/await和Promises它的工作原理是await new Promise(...)在 Promise 实现之前停止当前函数const data = [&nbsp; {name: "Warm up", timeFormat: "00:10", time: 10},&nbsp; {name: "High interval", timeFormat: "00:20", time: 20},&nbsp; {name: "Low Interval", timeFormat: "00:05", time: 5},&nbsp; {name: "High interval", timeFormat: "00:20", time: 20},&nbsp; {name: "Low Interval", timeFormat: "00:05", time: 5},]async function renderTimer(data) {&nbsp; for (let i = 0; i < data.length; i++) {&nbsp; &nbsp; const eachName = data[i].name;&nbsp; &nbsp; const eachTime = data[i].time;&nbsp; &nbsp; await new Promise(res => {&nbsp; &nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; &nbsp; console.log(eachName);&nbsp; &nbsp; &nbsp; &nbsp; // resolve the promise once the log is done&nbsp; &nbsp; &nbsp; &nbsp; res()&nbsp; &nbsp; &nbsp; }, eachTime * 100)}&nbsp; &nbsp; )&nbsp; &nbsp; // can't arrive here until the setTimeout is finalized&nbsp; }}renderTimer(data);

Answer 3

您也可以像这样在递归函数中执行此操作：const data = [{name: "Warm up", timeFormat: "00:10", time: 10},{name: "High interval", timeFormat: "00:20", time: 20},{name: "Low Interval", timeFormat: "00:05", time: 5},{name: "High interval", timeFormat: "00:20", time: 20},{name: "Low Interval", timeFormat: "00:05", time: 5},]const renderTimer = (data, i = 0) => {&nbsp; setTimeout(() => {&nbsp; &nbsp; console.log(data[i].name);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; // Call for next data&nbsp; &nbsp; if(i < data.length - 1)&nbsp; &nbsp; &nbsp; renderTimer(data, i + 1);&nbsp; }, data[i].time * 1000);}renderTimer(data);

Answer 4

你可以这样做：const data = [{name: "Warm up", timeFormat: "00:10", time: 10},{name: "High interval", timeFormat: "00:20", time: 20},{name: "Low Interval", timeFormat: "00:05", time: 5},{name: "High interval", timeFormat: "00:20", time: 20},{name: "Low Interval", timeFormat: "00:05", time: 5},]var time = 0;function renderTimer(data) {&nbsp; for (let i = 0; i < data.length; i++) {&nbsp; &nbsp; const eachName = data[i].name;&nbsp; &nbsp; time += data[i].time;&nbsp; &nbsp; const eachTime = time * 1000;&nbsp; &nbsp; setTimeout(() => {&nbsp; &nbsp; &nbsp; console.log(eachName);&nbsp; &nbsp; }, eachTime);&nbsp; }}renderTimer(data);