All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

JavaScript Wait For Function To Finish

Last Updated : Mar 11, 2024

JavaScript Wait For Function To Finish

In this tutorial we will show you the solution of JavaScript wait for function to finish, here we used setTimeout() function for make function to delay or wait some amount of time.

This function usually used for sets a timer which executes a function or specified piece of code once the timer get expires. So we achieved result by using this method and it really simple.

Step By Step Guide On JavaScript Wait For Function To Finish :-

Here we defined function callback() and lastly we initialized function call ‘callback()’ for executes this function after loading this program on browser.

Here we displayed message for user can understand function call loaded now it is executing inside method.

Then another message defined at before function close it will notifies function state that is end statement and after 5 seconds inside defined message will displayed at setTimeout() method because as we know web sets it timer for 5 secs so it delayed then printed.

<!DOCTYPE html>
<html>
    <head>
        <title>WAIT FOR FUNCTION TO FINISH</title>
    </head>
    <body>
        <script>
            function callback(){
                console.log("log before use setTimeout function");
                setTimeout(()=>{
                    console.log("inside Timeout");
                },5000);
                console.log("log after use setTimeout function");
            }
            callback();
        </script>
    </body>
</html>
  1. <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
  2. The<html> tag is used to indicate the beginning of HTML document.
  3. As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
  4. Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
  5. <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
  6. In script we defined function callback() and initialized function call because it get started when we loading program on browser.
  7. Within function we displayed message ‘log before use setTimeout function’ it notifies message of function execution state in starting point.
  8. Within setTimeout() function we displayed message ‘inside Timeout’ and we sets it timer as 5 seconds so this message will printed after 5 seconds.
  9. Lastly we defined ‘log after use setTimeout function’ it notifies end state of function and all messages are displayed on console.
  10. For seeing result we need to open console panel on browser so we have right click on browser webpage and select ‘inspect’ option then console panel will opened successfully.
  11. We had another option use shortcut ‘ctrl+shift+j’ on browser and at right hand side console panel will open with result.
  12. Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.

Conclusion :-

In conclusion now we are able to know how to make a function to wait particular amount of time using javascript.

When we executes program on browser we can see ‘log before use setTimeout function’ message on webpage because first we defined inside function callback() then few seconds later ‘log after use setTimeout function’ message will displayed it defined at end of method but its displayed before inside defined message because we sets timer as 5 secs.

After 5 seconds inside setTimeout() function defined message will printed at lastly.

I hope this tutorial on JavaScript wait for function to finish helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪