{"id":9114,"date":"2025-06-24T15:16:35","date_gmt":"2025-06-24T09:46:35","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=9114"},"modified":"2025-06-24T15:16:42","modified_gmt":"2025-06-24T09:46:42","slug":"synchronous-vs-asynchronous-javascript","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/synchronous-vs-asynchronous-javascript\/","title":{"rendered":"Synchronous vs Asynchronous JavaScript"},"content":{"rendered":"\n

<\/h1>\n\n\n\n

Knowing how the code operates, particularly the distinction between synchronous and asynchronous execution, is crucial when working with JavaScript. Let’s simplify it using relatable examples.<\/p>\n\n\n\n

What is Synchronous?<\/strong><\/p>\n\n\n\n

Line by line, synchronous code runs in a sequential fashion.Before proceeding to the next task, each one must be finished.<\/p>\n\n\n\n

An example:<\/strong><\/h3>\n\n\n\n

Let’s\u00a0say\u00a0a\u00a0user\u00a0completes\u00a0a\u00a0website\u00a0form. The\u00a0browser\u00a0begins\u00a0examining\u00a0each\u00a0field\u00a0individually\u00a0as\u00a0soon\u00a0as\u00a0they\u00a0click\u00a0the\u00a0“Submit”\u00a0button: Name\u00a0\u2192\u00a0OK
Email\u00a0\u2192\u00a0All\u00a0right
Phone\u00a0Number\u00a0\u2192\u00a0All\u00a0right
Until\u00a0all\u00a0checks\u00a0are\u00a0finished,\u00a0nothing\u00a0else\u00a0can\u00a0happen\u00a0on\u00a0the\u00a0page.<\/p>\n\n\n\n

Code Example<\/strong><\/h3>\n\n\n\n

console.log(“Validating form\u2026”);<\/p>\n\n\n\n

function validateForm() {
for (let i = 0; i < 1e9; i++) {
\/\/ Simulate heavy validation (e.g., complex calculations)
}
console.log(“Form is valid.”);
}
validateForm();
console.log(“Form submitted.”);<\/p>\n\n\n\n

Output:<\/strong><\/h3>\n\n\n\n

Start
Long task finished
End<\/p>\n\n\n\n

What is Asynchronous?<\/strong><\/p>\n\n\n\n

Because JavaScript is asynchronous, it can start a task and move on to the next line without waiting for it to finish.<\/p>\n\n\n\n

An example:<\/strong><\/strong><\/h3>\n\n\n\n

Modern apps often send data to the server and show a loading spinner so that the user can interact with the page while waiting.<\/p>\n\n\n\n

Code Example:<\/strong><\/h3>\n\n\n\n

console.log(“Submitting form\u2026”);<\/p>\n\n\n\n

setTimeout(() => {
console.log(“Server responded: Form saved successfully.”);
}, 2000); \/\/ Simulates network delay<\/p>\n\n\n\n

console.log(“Showing loading spinner\u2026”);<\/p>\n\n\n\n

Output:<\/strong><\/h3>\n\n\n\n

Submitting form\u2026
Showing loading spinner\u2026
Server responded: Form saved successfully.<\/p>\n\n\n\n

When to Use Asynchronous Code?<\/strong><\/p>\n\n\n\n

When a task requires a lot of time, use async code, like:<\/p>\n\n\n\n