在遍历数组的 for 循环中执行递归 function 的最佳方法

Question

I have an array of letters:

const letters = ['a','b','c','d'];

I also have a function which takes a string argument letter and returns a concatenation of that letter and a random number.

function letterNumber(letter) {
   console.log(letter + '-' + Math.random());
}

What I am looking to do is to iterate over the letters array and for each item in the array to run the letterNumber function N times every X milliseconds, with the array item being passed to the letter function argument .

What would be the best (and most performant) way to achieve this? Thanks a lot!

EDIT

I have now made it work by moving the let iterator=0;within the nameless function in the code below. Is there a better way of doing this if faced with a lot of values in the letters array?

const letters = ['a','b','c','d'];
const interval = 1000;
const runCount = 5;

function letterNumber(letter) {
    console.log(letter+'_'+Math.random());
}

for (let i = 0;i<letters.length;i++) {   
    (function(i) {
        let iterator=0;
        let iter = setInterval(function() {
                if (iterator > runCount-1) {
                    clearInterval(iter);
                } else {
                    letterNumber(letters[i]);
                    iterator++;
                }
        }, interval)
    })(i);
}

Answer 1

EDIT - I apologize, I initially misunderstood your question. Here's how I would recommend running through this.

---

It's been a while since I've worked with Javascript, so bear with me. Instead of the setInterval() and clearInterval() combination, I would go with the setTimeout() function. I don't know the technical ins and outs of it, but much like the setInterval() function you provide the setTimeout() function two arguments - the function/command you wish to run, then how long you wish to wait. This is how I would utilize this:

let iterator = 1;

function letterNumber(letter) {
    console.log(`${letter}_${Math.ceil(Math.random() * 25) }`);
}

while (iterator <= runCount){
    setTimeout(() => letters.forEach(letterNumber), interval * iterator);
    iterator++;
}

You'll notice in the second argument passed into the setTimeout() function, I provided the value of the interval times the iterator. The reason is that setTimeout() is executed as synchronous code, and the multiple calls to setTimeout() all run at the same time. Each call to setTimeout() creates asynchronous code that will execute later, after the given delay. Which is why the amount of the delay has to be produced dynamically. Otherwise, if I were to use this code:

while (iterator <= runCount){
    setTimeout(() => letters.forEach(letterNumber), interval);
    iterator++;
}

It would queue each call to the setTimeout() function, then each call will wait the specified amount (in this case, each call would be waiting for 1 second) then all run at the same time.

So when we run it with a dynamically created interval ( interval * iterator ), each call waits 1 second longer than the previous call to run, resulting in a delay between each return.

I hope I explained that well enough, sorry if I may have missed out on some of the details, but this should provide you the results your looking for.

Another thing to take note of, in the code I provided, I set the iterator to 1, and the condition for the while statement is testing for the iterator begin less than or equal to the runCount. I started with 1, so that the first result of the setTimeout() function was delayed by one second.

If you wish to have the first result set returned immediately, you can change the initialization of the iterator variable to 0, and change the while condition to a plain less than statement like so:

let iterator = 0;

...

while (iterator < runCount){
   ...
}

Another thing to look out for is what Math.random() does. Currently, it provides you with a decimal value between 0 (inclusive) and 1 (exclusive). In other words, possible values range from 0 to 0.99999 repeating. So if you want to get an integer value, you can do something like this:

function letterNumber(letter {
   console.log(letter + '-' + (Math.ceil(Math.random() * 25) )
}

The above code would provide you integer values from 1 to 25.

If you want more details, you can take a look at this MDN article on the Math.random() function.

I really hope this helps: :)

Answer 2

You could get rid of the closure and use a local scope for item/letter, iterator count and iter .

 function letterNumber(letter) { console.log(letter + '_' + Math.random()); } const letters = ['a', 'b', 'c', 'd'], interval = 1000, runCount = 5; for (const item of letters) { let iterator = 0, iter = setInterval(function() { if (++iterator > runCount) clearInterval(iter); else letterNumber(item); }, interval); }

 .as-console-wrapper { max-height: 100%;important: top; 0; }