. Advertisement .
..3..
. Advertisement .
..4..
It is common knowledge that Javascript’s code execution process is asynchronous. In other words, it will never wait for a function’s completion before starting the functions below.
That is why it becomes vital for a programmer to understand the way to wait for function to finish in Javascript. This skill will, after all, be helpful for a long time.
Wait For Function To Finish In Javascript With callback
callback is one of the most basic Javascript functions. Its main responsibility is allowing you the capability to pass it to a new function. It will then become the accepting function.
The receiving function can freely call callback at any point during the execution process. However, the most common approach is to call it near the end.
Utilizing this pattern, it becomes possible to assign a new function as a callback for your previous function. You can then make the receiving function call it whenever you want.
The only thing to keep in mind is that it’s a requirement to use function references when utilizing callback. In short, it’s the function name minus the ().
function 1st(callback) {
console.log("First");
callback();
}
function 2nd() {
console.log("Second");
}
1st(2nd);
This solution needs you to edit all the functions involved to accept callback, introducing a risk of callback hell. That is why you need the two approaches below.
Wait For Function To Finish In Javascript With Promise Object
Promise is a Javascript object representing an eventual fulfillment token, hence the name. It starts out as pending, awaiting either resolution or rejection, depending on how the process taking place within it proceeds.
function f(isTrue) {
return new Promise((resolve, reject) => {
if (isTrue) {
resolve("Resolve Promise");
} else {
reject("Reject Promise");
}
});
}
In accordance with Promise’s result, the function will call either reject() or resolve() and end its pending state. However, there is a need to chain the functions using catch() and then(). Using this pattern, you can give your functions a sequence by placing your next function call within then().
function 1st() {
return new Promise((resolve) => {
console.log("First");
resolve();
});
}
function 2nd() {
return new Promise((resolve) => {
console.log("Second");
resolve();
});
}
function 3rd(){
console.log("Third");
}
Wait For Function To Finish In Javascript With async/await
This method is more of an improvement on the Promise method, as it replaces the promise pattern with a new pattern. The await keyword provides you with the ability to wait for either the resolution or rejection of the object.
However, it needs to be utilized within the async function to avoid needing to write according to the promise chain pattern.
Let’s take the same example above:
function 1st() {
return new Promise((resolve) => {
console.log("First");
resolve();
});
}
function 2nd() {
return new Promise((resolve) => {
console.log("Second");
resolve();
});
}
function 3rd(){
console.log("Third");
}
async function aSync() {
await 1st();
await 2nd();
3rd();
}
aSync();
There is a problem with this approach, though. The reject() function can cause an UnhandledPromiseRejection error if you don’t use any try/catch block.
This error is just as hard to figure out as the fetch no defined error.
Conclusion
We hope that this article has answered all the questions you have regarding how to wait for function to finish in Javascript. All three solutions that we provided carry some unique strengths and signature weaknesses.
For example, callback is easy to grasp at first, but it can get confusing if you over-utilize. In the same vein, await is very convenient, but it needs async to function.
Look through all of them and see for yourself which is most fitting for your task at hand.
Leave a comment