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

Question

I have an array of numbers like this:

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

What I'd like to do is something like this graph:

What I've achieved:

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

cosNumbers();
cosNumbers(true);

I can get the first function results as i want to be. but the second one cannot, because I'm reversing the numbers from smaller to biggest numbers, so smallest number will trigger earlier than larger in setTimeout(). This is simple function but I don't know why is it so challenging to me :(

Answer 1

The problem is that you are passing in the number into your IIFE but using it as an index. They are different: the number refers to the actual values of the array, while index refers to their positions in the array.

Remember that the index is accessible as the second argument in the .forEach() callback. So you should access number and index separately as such: .forEach((number, index) => ...)

I believe what you wanted is this:

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

Because you want to:

• Log the actual value (the item in the array)
• Use the index of the item to time their appearance

 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);