时间戳

首页 > 解决方案 > 在为每个数组元素循环数组时如何重新启动settimeout

javascript - 在为每个数组元素循环数组时如何重新启动settimeout

问题描述

我有以下数组。[{startColor:"red",event:"start",time:0.3},{stopColor:"blue",event:"stop",time:10},{startColor:"green",event:"start",time:40}]. 我正在遍历数组，对于每个 settimeout 周期，我想使用 settimeout 在每个数组元素的时间部分冻结该给定时间段的代码，并显示数组元素中秒数的相应颜色。. 例子 。对于每个数组元素settimeout(function, time_from_the_element) . 我面临的挑战是，它正在循环，但在第一个元素被循环后， settimeout 不会为第二个元素重新启动。也就是说，假设第一个元素需要 14 秒，下一个元素需要 16 秒，因此在前 14 秒之后，只需要两秒即可调用下一个元素，尽管我希望在前 14 秒之后，settimeout 在 0 处重新开始，并且数到 16 再等等。我花了一整天的时间来尝试解决它。我面临的另一个挑战是，在数组中的最后一个循环之后，我想从显示中清除最后一个元素的颜色。那是在最后一个元素被循环之后，这看起来很棘手。

注意：setClockBackgrouco和 setbackgroucol是用来显示颜色的函数，在这种情况下可以用 console.log 代替。

 const changeColors = async () => {
        const dat2 = await new Promise((resolve) => {
          for (let i = 0; i < data.length; i++) {
            console.log("data i is:", data[i]);
            if (data[i].event === "start") {
              setTimeout(() => {
                console.log("Start: ", data[i].event);

            setClockBackgroucol(null);
            setbackgroucol(data[i].startColor);

          
          }, data[i].programtime * 1000);
        } else if (data[i].event === "stop") {
          setTimeout(() => {
            console.log("Stop: ", data[i].event);

            setClockBackgroucol(data[i].stopColor);
            setbackgroucol(null);

            console.log(
              "time taken is ",
              data[i].time. * 1000
            );
          }, data[i].time * 1000);
         
        }

        console.log("should have been called last");
     
      }
    });
  
  };

标签： javascriptarraysloopssettimeout

解决方案

试试这个方法

async function changeColors() {
  const array = [
    { startColor: "red", event: "start", time: 3000 },
    { stopColor: "blue", event: "stop", time: 1000 },
    { startColor: "green", event: "start", time: 4000 },
  ];
  for (const object of array) {
    switch (object.event) {
      case "start": {
        console.log(object.startColor);
        await delay(object.time); // in milliseconds
        break;
      }
      case "stop": {
        console.log(object.stopColor);
        await delay(object.time); // in milliseconds
        break;
      }
      default:
        continue;
    }
  }
}

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
changeColors()

推荐阅读