"In programming, asynchronous events are those occurring independently of the main program flow. Asynchronous actions are actions executed in a non-blocking scheme, allowing the main program flow to continue processing."
"With Ajax, web applications can
retrieve data from the server
asynchronously in the background
without interfering with the display
and behavior of the existing page."
When you click Edit and Save on SO it is happening asynchronously.
Think of the end of an interview, and they guy says, "Don't call us, we'll call you". That is the essence of an asynchronous event.
Normally you define functions and you call functions explicitly. Your program has a structure where it starts from line 1, then line 2, and except for some conditional code and iterations, calling functions, etc., there is a simple, liner, synchronous structure.
But in some cases you have actions that are triggered by events outside of the direct control of the program, things that come from outside the program, like a user interface events (user clicks the mouse) or a network event (someone tries to connect to your server). Your code does not generate these events directly. They are generated outside of your program, often by the OS based on their monitoring of user interface devices and other systems. These are called asynchronous events.
Your page is delivered from the server to a client browser, somewhere out there in the Internet. The browser has drawn the page on a screen, and somebody — or some thing — is looking at it. It's a waiting game. Eyes shift back and forth, taking in this or that detail in quick jumps, darting to the side now and then, away from the screen, to investigate distractions in the environment. The clock ticks. The page glows softly, passively, as the user hovers inactive, hand loosely draped over a mouse, neck bent down and eyes more and more intent on something inviting that your page has to offer.
Suddenly, without any warning at all, the cursor begins to move as the hand on the mouse stiffens slightly and begins nudging the little plastic bump over the rough surface of the table. As the mouse moves, its surrogate on the screen moves in close imitation, grazing past interesting images and witty remarks in the content of your page. Eventually a decision is made, the movement pauses, a muscle or two contract slightly, and the mouse button is depressed by an insistent finger. The microswitch in the mouse triggers an electronic impulse, and suddenly the browser is made aware of what's happened: a mouse click.
In all that, everything about what the user has done while gazing at the page has happened in a way totally unpredictable to the browser, to any client code in your web page, to anything resident on your servers. There was no knowable "wait time" between human actions. The actions, therefore, as transmitted by the equipment hooked to the user's computer, happened when they happened and not according to a predictable clock — that is, they happened asynchronously.
The call to console.log('Two!') will be executed without blocking the rest of the code that happens after it.
In a real scenario, replace setTimeout with someone clicking a button on a webpage. The response to the button click will happen eventually, without blocking other code execution such as page rendering.
An asynchronous event is an event that runs outside the application's main thread.
The best way to understand is to compare to events that run synchronously. The most typical example would be loading a web page.
When you went to this page, you clicked on a link and waited for the page to load and were not able to interact with or use this page until it finished loading. To contrast, if this page were to have an AJAX event (that's Asynchronous JavaScript and XML event) associated with some user action, this page would load some data from another source asynchronously - in parallel (theoretically) with any other actions going on.
Example with Two Synchronous Events (A and B):
First A does something. When A is finished B does something.
Example with Two Asynchronous Events (A and B):
Both A and B do something at the same time and neither event waits for the other.
Synchronous
You want a pizza for dinner and you are out of the frozen kind. So you have to stop playing WOW which upsets your guild. You go to the kitchen, make the dough, cover it with sauce, add the cheese, and smother it your favorite bacon topping. You just spent 20 minutes of your time making the pizza with another 10 minutes in the oven. The timer beeps and you pull the hot pie out. You can sit back down in front of your computer, eat the pizza, and continue with your raid.
Asynchronous
You want a pizza for dinner while playing WOW. You open up a browser window on your 5th monitor. You load up the Pizza website and order your extra cheesy bacon pizza with a side of bacon grease garlic sauce. You go back to your raid and after 20 minutes the door bell rings. You get the pizza. You sit back down in front of your computer, eat the pizza, and continue with your raid.
So what is the difference? One way you waste 20-30 minutes of precious WOW time, the other way you waste $20 plus tip.
Some event handlers are called immediately when the event occurs. These are called ‘synchronous’ events. An example is DocumentNew. It gets called as soon as the user creates a new document.
However, some events are called shortly after the event occurs, usually after a short amount of idle time. These are called ‘asynchronous’ events. They are asynchronous because it would destabalize Source Insight if a user-written macro were to be called at the exact time the event occured.
Asynchronous events are those events that we don't know when it will be occurred in the future for example when server is requested for some file we don't know when it will fulfilled our request or UI events we don't know when user will click on a button or other UI element, but despite of it other things on page or application is happening it does not block anything say the page greyed out all UI until some file from server is not coming or some event is happening all things are independent this is the power of asynchronous events, simply say independent events
If code is synchronous (or sync), it means each piece of code runs in order, sequentially, and the next piece of code cannot run until the previous is completed. Most code is typically synchronous.
If code is asynchronous (or async), it means that code can run separately and independently of other code. If there is async code in the middle of a bunch of sync code, under the context of this particular question, the async code will only run when its event is triggered, regardless of where in the sync code you put it. It is completely separate and independent of the sync code and runs whenever its event says to, not just when the previous piece of code is done running. Some examples of this would be for code that runs on a timed interval, after a file is successfully saved, after a web request is sent, when the user clicks a button, or after an image loads.