DOM Manipulation - JavaScript

Asynchronous JavaScript

JavaScript is a single-threaded, synchronous language by default. It executes one task at a time in sequence. Without asynchronous features, any long-running task (like fetching data from a server or waiting for user input) would block the main thread, causing the web page to freeze.

Asynchronous JavaScript solves this problem by allowing tasks to run in the background without blocking the main execution flow.

Core Concepts:

Call Stack: Where functions are executed one by one.
Web APIs: Browser-provided features (timers, DOM events, fetch, etc.) that run tasks asynchronously.
Callback Queue: Stores completed async tasks, waiting to be executed.
Event Loop: Continuously checks if the call stack is empty and pushes queued async tasks for execution.

Analogy: Think of a chef (JS engine) cooking meals. If a dish takes time (async task), the chef delegates it to an assistant (Web APIs). Once it’s ready, the assistant notifies the chef, who serves it when free (Event Loop).

1. setTimeout & setInterval

Timers are the simplest form of asynchronous behavior in JavaScript:

setTimeout: Runs a function once after a specified delay (in ms).
setInterval: Runs a function repeatedly at fixed time intervals (in ms).
clearTimeout / clearInterval: Used to cancel scheduled tasks.

Syntax:

// Run once after a delay setTimeout(callback, delay); // Run repeatedly const id = setInterval(callback, interval); // Cancel a scheduled interval clearInterval(id);

Advantages: Easy scheduling, useful for reminders, animations, polling.
Disadvantages: Inaccurate for precise tasks (due to event loop delays), nesting leads to cluttered code.
Analogy: Like setting an alarm clock — setTimeout rings once, setInterval keeps ringing until stopped.

2. Callbacks

A callback is a function passed into another function as an argument, to be executed later. This makes it possible to run code asynchronously (after some task completes).

Syntax:

function task(param, callback) { // do something callback(); // run after task completes }

Advantages: Simple, supported in all environments, foundation of async JS.
Disadvantages: Nested callbacks create "callback hell" → hard to debug and maintain.
Analogy: Like leaving your phone number for a service center to call you back when the repair is done.

3. Promises (.then, .catch, .finally)

A Promise is an object that represents the eventual result of an asynchronous operation. It can be in one of three states:

Pending: Initial state, operation is not yet finished.
Fulfilled: Operation completed successfully (resolve).
Rejected: Operation failed (reject).

Syntax:

Advantages: Eliminates callback hell, clear success & error handling, allows chaining of tasks.
Disadvantages: Can still become verbose with many chained operations.
Analogy: Like an online order: Pending (order placed), Fulfilled (delivered), Rejected (failed delivery).

4. async/await

Introduced in ES2017, async/await is syntactic sugar over Promises. async makes a function return a Promise. await pauses execution inside the function until the Promise resolves or rejects.

Syntax:

async function functionName() { try { const result = await somePromise; return result; } catch (error) { // handle error } }

Advantages: Makes async code look synchronous, reduces nesting, easy error handling with try/catch.
Disadvantages: Only works inside async functions, still built on Promises, not supported in very old browsers.
Analogy: Like pressing pause on a movie until buffering finishes, then resuming from the same spot.

5. fetch API

fetch() is a modern, built-in API for making HTTP requests. It always returns a Promise, which resolves to a Response object.

Syntax:

fetch(url, options) .then(response => response.json()) .then(data => { ... }) .catch(error => { ... });

Advantages: Cleaner than older XMLHttpRequest, works seamlessly with Promises and async/await.
Disadvantages: Only rejects on network errors (not HTTP errors), older browsers need polyfills.
Analogy: Like sending a letter (request) to a server and waiting for the reply (response).