Call A Function After Previous Function Is Complete JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this tutorial we will show you the solution of call a function after previous function is complete JavaScript, here we used jquery for define functions so imported jquery file within the head tag.
We defined one button ‘click’ when user clicks that it initialize first function then within first function executes message and lastly second function initialized so it will calls second after execution of first function.
Step By Step Guide On Call A Function After Previous Function Is Complete JavaScript :-
Here we defined one button ‘click’ when user clicks this button using jquery we can identify then within that we defined message will display on console and callbackFirst(); function call declared for calls this function.
Within callbackFirst() method what we defined will executed and displaying message on console lastly we declared ‘callbackSecond();’ function call will loads then within callbackSecond() method defined message ‘Second Function Start’ will display.
<!DOCTYPE html>
<html>
<head>
<title>Call Function After Function</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
<button>Click</button>
</body>
<script>
$('button').click(function(){
console.log("Button Clicked!");
callbackFirst();
});
function callbackFirst(){
console.log("First Function Start");
callbackSecond();
}
function callbackSecond(){
console.log("Second Function Start");
}
</script>
</html>
- <!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.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- 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.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined one button ‘click’ and within <script> tag we defined functions using jquery. The line ‘$('button').click()’ identifies when user clicks button then function will initialized displays message ‘Button Clicked!’ after that declared ‘callbackFirst();’ method will called.
- In method ‘callbackFirst()’ we displays message ‘First Function Start’ on console and declared function ‘callbackSecond();’ will called.
- In function callbackSecond() we defined message ‘Second Function Start’ will displays lastly on console.
- 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 call a function after previous function is complete in javascript.
When we executes our program on browser we can see one button ‘click’ when user clicks this it will loads each function then displays message one by one on console.
For open console we need to give shortcut ‘ctrl+shift+j’ then console panel will open at right hand side with result message.
We can see first defined function message is displayed at first then only second function message will displayed and this program need internet connection because we used external jquery file supports.
I hope this tutorial on call a function after previous function is complete JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
