Loading lesson path
Formula
Async code allows a program to start a long - running task (like fetching data from a file).and continue with other tasks before the first one finishes. Async code prevents the application from freezing, which is critical for user experience.
Control Flow is the order in which statements are executed in a program. By default, JavaScript runs code from top to bottom and left to right. Async programming can change this.
JavaScript executes code one line at a time. Each line must finish before the next line runs.
myDisplayer("A");
myDisplayer("B");
myDisplayer("C");The output is always A B C.
JavaScript functions are executed in the sequence they are called. Not in the sequence they are defined. This example will display "
" because the functions are called in that order:
Example function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
This example will display "" because the functions are called in that order:
Example function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();The examples above are normal synchronous flow.
(network requests, timers, user input). To stay responsive, JavaScript can use async programming.
Asynchronous flow refers to how JavaScript allows certain operations to run in the background and let their results be handled when they are ready.If JavaScript waited for these tasks, the page would freeze. Asych code lets the rest of the program continue to run. Async code does not run immediately: Timers run after a specified number of milliseconds
A frozen page is a broken page. Asynch code does not block execution.
Example myDisplayer("A");
setTimeout(function() {
myDisplayer("B");
}, 1000);
myDisplayer("C");The output from the above example is A C B.
let result;
setTimeout(function() {
result = 5;
}, 1000);// What is result here? Result is undefined because the async code has not finished yet. Beginners expect async results immediately.
Events are actions or occurrences that happen in the browser, often triggered by user interactions (like clicks, keypresses, or form submissions) or by the browser itself (like page loading or resizing).
Example (Events) <button onclick="displayDate()">The time is?</button>
JavaScript handles asynchronus programming using different core concepts.
The JavaScript standard flow is executing line by line
Allows code to run while other code is waiting
Callbacks were the first solution for async JavaScript