10.1 Synchronous vs Asynchronous Execution

To write resilient JavaScript, you must understand the distinction between blocking (synchronous) and non-blocking (asynchronous) operations.

// 1. Synchronous Blocking Example:
console.log("Task 1: Order Coffee");
// Simulating heavy calculation (blocks main thread):
for (let i = 0; i < 1e8; i++) { /* burn CPU cycles */ }
console.log("Task 2: Coffee Ready"); // Must wait until loop finishes!

// 2. Asynchronous Non-Blocking Example:
console.log("Step A: Start brewing coffee in background");
setTimeout(() => {
  console.log("Step C: ☕ Coffee is served after 2 seconds!");
}, 2000);
console.log("Step B: Customer reads book while waiting"); // Runs immediately!

10.2 The Callback Function Pattern

In JavaScript, functions are first-class citizens. This means functions can be stored in variables, passed as arguments into other functions, and returned from functions.

// 1. Synchronous Callback: Executed immediately during the outer function run
function processOrder(item, callback) {
  console.log(`Processing item: ${item}`);
  callback(item); // Called immediately on the same tick
}

processOrder("Laptop", (product) => {
  console.log(`Receipt printed for: ${product}`);
});

// 2. Asynchronous Callback: Executed in the future when a trigger fires
function delayAlert(message, delayMs, callback) {
  setTimeout(() => {
    console.log(`Alert: ${message}`);
    if (callback) callback();
  }, delayMs);
}

delayAlert("Backup Complete", 1500, () => {
  console.log("Notified administrator via email.");
});

10.3 One-Shot Timers: setTimeout() & clearTimeout()

The setTimeout() method sets a timer which executes a function once the timer expires.

// 1. Scheduling a timeout with extra parameter passing:
// Syntax: setTimeout(fn, delayMs, arg1, arg2, ...)
function welcome(firstName, role) {
  console.log(`Welcome back, ${firstName} (${role})!`);
}

// Passing parameters directly via setTimeout:
const timerId = setTimeout(welcome, 3000, "Eleanor", "Project Lead");

// 2. Canceling a timeout before it fires:
const autoSaveTimer = setTimeout(() => {
  console.log("Draft auto-saved to cloud.");
}, 5000);

// If the user clicks "Manual Save" or closes the modal, cancel the timer:
function onManualSave() {
  clearTimeout(autoSaveTimer); // Timer is destroyed, callback will NEVER fire!
  console.log("Manual save triggered. Auto-save canceled.");
}
onManualSave();

10.4 Recurring Timers: setInterval() & clearInterval()

While setTimeout fires once, setInterval() continuously and repeatedly calls a function with a fixed time delay between each execution.

// 1. Digital Clock using setInterval:
let seconds = 0;

const clockIntervalId = setInterval(() => {
  seconds++;
  console.log(`Timer running: ${seconds}s`);

  // Stop after 10 seconds:
  if (seconds >= 10) {
    clearInterval(clockIntervalId); // Crucial! Prevents memory leaks and infinite loops
    console.log("Timer completed and stopped.");
  }
}, 1000);

// Safe alternative: recursive setTimeout waits for previous run to finish before scheduling next
function pollServer() {
  fetchUpdates().finally(() => {
    setTimeout(pollServer, 3000); // 3 seconds AFTER completion!
  });
}

10.5 The Event Loop Architecture: Call Stack, Web APIs & Task Queue

How does a single-threaded runtime manage timers, network fetches, and user clicks simultaneously? The answer is the **Browser Runtime Architecture** consisting of four primary components:

10.6 The Zero-Delay Timer: setTimeout(fn, 0)

One of the most common JavaScript interview questions asks: "What happens if delay is 0ms: setTimeout(fn, 0)?" Does it execute immediately?

console.log("1. Apple");

setTimeout(() => {
  console.log("2. Banana (0ms delay)");
}, 0);

console.log("3. Cherry");

// Output Order:
// 1. Apple
// 3. Cherry
// 2. Banana (0ms delay) -- executes AFTER the Call Stack is empty!

Browser Clamping & Background Tab Throttling

• 4ms Minimum Clamping: HTML5 spec mandates that after 5 nested levels of setTimeout or setInterval calls, the browser automatically clamps the minimum delay to 4 milliseconds.
• Inactive Tab Throttling: To preserve laptop battery and CPU cycles, browsers (Chrome, Safari, Firefox) throttle timers in inactive background tabs to run at most once per second (1000ms).

10.7 Interactive Mini-Labs

Explore asynchronous scheduling, timer precision, and real-time cancellation in these 3 interactive labs:

10.8 Coding Challenge: Inactivity Auto-Logout & Warning Controller

Synthesize setTimeout, setInterval, clearTimeout, and clearInterval to build a banking session controller that warns users before logging them out due to inactivity.

function createSessionGuard(totalTimeoutSec, warningLeadSec, onWarning, onLogout) {
  let warningTimeoutId = null;
  let logoutTimeoutId  = null;
  let countdownIntervalId = null;
  let secondsRemaining = warningLeadSec;

  function clearAllTimers() {
    clearTimeout(warningTimeoutId);
    clearTimeout(logoutTimeoutId);
    clearInterval(countdownIntervalId);
    warningTimeoutId = null;
    logoutTimeoutId = null;
    countdownIntervalId = null;
  }

  function start() {
    clearAllTimers();
    secondsRemaining = warningLeadSec;

    const delayUntilWarningMs = (totalTimeoutSec - warningLeadSec) * 1000;
    const totalDelayMs = totalTimeoutSec * 1000;

    // 1. Schedule the Warning trigger
    warningTimeoutId = setTimeout(() => {
      // Start 1-second countdown interval
      onWarning(secondsRemaining);
      countdownIntervalId = setInterval(() => {
        secondsRemaining--;
        if (secondsRemaining > 0) {
          onWarning(secondsRemaining);
        } else {
          clearInterval(countdownIntervalId);
        }
      }, 1000);
    }, delayUntilWarningMs);

    // 2. Schedule the Hard Logout trigger
    logoutTimeoutId = setTimeout(() => {
      clearAllTimers();
      onLogout();
    }, totalDelayMs);
  }

  // Start immediately upon creation
  start();

  return {
    resetActivity: function() {
      // Called on user click, keydown, or mouse movement
      start();
    },
    destroy: function() {
      clearAllTimers();
    }
  };
}

// ── Usage Example in Web App:
const session = createSessionGuard(
  60, // 60-second total timeout
  15, // Warn at 45 seconds (15s remaining)
  (rem) => console.log(`⚠️ Warning: You will be logged out in ${rem}s!`),
  () => console.log("🔒 Logged out due to inactivity.")
);

// If user interacts, reset the session timer:
window.addEventListener("click", () => session.resetActivity());
window.addEventListener("keydown", () => session.resetActivity());