I was working on a project the other day when I came across an issue. I needed to force Javascript to wait until a FOR loop finished before running any other code. Using awaits in a FOR loops and waiting for FOR loops to finish in javascript can be a nightmare. I came up with a solution that works for me, however. So, let’s get into it.
Before we go any further, let’s talk about why waiting for FOR loops to finish in Javascript is a problem. If you are a new Javascript developer, there’s a good chance you ended up looking for an answer in this article. Here’s why.
Javascript is a non-blocking programming language. That basically means that Javascript doesn’t wait for something to happen before moving on. In this case, Javascript will skip over a FOR loop to execute lines of a program while that FOR loop is processing. This can lead to all sorts of issues like race conditions or improper variable assignments.
The first time I ran into this problem, I tried using async/await. If you haven’t used async/await yet, it’s nothing more than a way to make Javascript assign a value to a variable after a function has processed while forcing the proceeding arguments from executing until that assignment is completed. Believe it or not, that is a gross oversimplification of async/await.
Anyway, the idea is that you can use async/await to force Javascript into waiting for the FOR loop to finish before processing anything else. The problem is that it doesn’t work. Lint will yell at you if you are using it as well.
There is a promise.all solution. It works and promise.all is the recommended way to handle this edge case instead of trying to force waiting for a FOR loop to finish.
I couldn’t use promise.all the other day, however. I needed to be 100% sure that each line would execute and process in exact order. It was critical that iterations were not processed out of order.
So, I resorted to using async/await but with a recursive function. Remember how I said that async/await could be used to make Javascript wait to execute lines of code until an assignment has been made to a variable? In this case, I used a trigger function to call a function that would return a promise. This function was a recursive function that called itself, however. A counter was passed through the recursive function to operate like the counter in a FOR loop. I also used an IF statement to evaluate the counter before running further.
let counter = 0;
function recursiveFunction(data) {
return new Promise( async( resolve) => {
if (counter < 10) {
counter ++;
const data = doSomething(data);
recursiveFunction(data)
resolve (true);
}
});
}
async function triggerRecursiveFunction(data) {
const response = recursiveFunction(data);
if (response) {
alert(‘Loop Is done’);
}
}That example is very generic. It’s only meant to illustrate how I used the recursive function to replace an await with a FOR loop in Javascript. I’m not sure why I didn’t think of this before. But now you know how to force waiting for FOR Loops To Finish In Javascript, too.
