时间戳

首页 > 解决方案 > 如何使用 setTimeout 在数字数组上像 cos 图一样循环两次

javascript - 如何使用 setTimeout 在数字数组上像 cos 图一样循环两次

问题描述

我有一个这样的数字数组：

const numbers = [.1, .2, .3, .4, .5, .6, .7, .8, .9, 1];

我想做的是这样的图表：

角色图

我所取得的成就：

const cosNumbers = (reverse) => {
(reverse ? numbers.reverse() : numbers).forEach((number) => {
 ((index) => {
   setTimeout(() => { console.log(index) }, index * 1000);
 })(number);
});
};

cosNumbers();
cosNumbers(true);

我可以得到我想要的第一个函数结果。但第二个不能，因为我正在将数字从较小的数字反转为最大的数字，所以在 setTimeout() 中，最小的数字会比较大的数字更早触发。这是一个简单的功能，但我不知道为什么它对我来说如此具有挑战性:(

标签： javascriptnode.jsmath

解决方案

问题是您将数字传递到您的 IIFE 但将其用作索引。它们是不同的：thenumber指的是数组的实际值，而index指的是它们在数组中的位置。

请记住，索引可作为.forEach()回调中的第二个参数访问。因此，您应该像这样单独访问number和：index.forEach((number, index) => ...)

我相信你想要的是这样的：

setTimeout(() => console.log(number), index * 1000);

因为你想：

  • 记录实际值（数组中的项目）
  • 使用项目的索引来计时它们的出现

const numbers = [.1, .2, .3, .4, .5, .6, .7, .8, .9, 1];
const cosNumbers = (reverse) => {
  (reverse ? numbers.reverse() : numbers).forEach((number, index) => {
    setTimeout(() => console.log(number), index * 1000);
  });
};

cosNumbers();
cosNumbers(true);

推荐阅读