What Happens If Call Two Functions When Button Click Event In JavaScript

I'm tying to call two functions in JavaScript when a button click event happens. S

Solution 1:

It executes the same way as ordinary javascript. submitInput() executes first. I would not reccomend doing it this way though. It would be considered bad practice. keep your javascript out of your HTML ok.

Lastly, just because something executes first, does not mean that it will finish first.. javascript is both async and synchronous in some cases.

Solution 2:

JavaScript is by nature mono-thread, that is to say its engine can only compute one operation at once (it is not parallel !). It means that as long as a process is not finished, the user remains stuck in front of his browser and has to wait till the end. Theoritically :)

Fortunately, JS is also asynchronous, it means that one is able to free the user thread, waiting for some other conditions to be fullfilled to continue the computation. To be more accurate, the execution of some functions can be delayed, one of the simplest examples is the use of the functions setTimeout() (once) or setInterval() (several times). A callback is a function triggered only under some conditions (i.e. a time interval expires, a script sends an answer, etc...). It prevents the browser from being "freezed", waiting for the result of a computation.

In your case, if there isn't any asynchronous call, the functions will be executed in the order you gave. Once the first is completed, the second will be triggered.

Try those two dummy functions :

function myFunction() {
            for (var iter = 0; iter < 500000000; iter++) {
            if (iter==499999999) {alert ("done !");}
            }
}

function myFunction2() {
            alert ("Hi there !");
            }

Call them in this order, then change their order. The second will always be executed once the first is complete.