For some time, JavaScript events loop used to confuse me. JavaScript events loop JavaScript is single-threaded, but still it handles thousands of things at the same time (e.g user clicks, network calls and even setting timers). I have always wondered how that worked. After studying and implementing it for a while, it has improved how I build web applications. How I think of it Imagine a chef (the primary thread) in the kitchen, instead of cooking one particular dish(order) completely, he Takes an order (Function)
Starts cooking (Start async operation)
Starts another order while waiting for the food to get simmered
Returns to check the simmering order when possible Takes an order (Function) Starts cooking (Start async operation) Starts another order while waiting for the food to get simmered Returns to check the simmering order when possible This is how JavaScript handles concurrency despite being single-threaded. How I applied this to my projects API calls without Freezing the UI
// Previously: Freezing UI while waiting for data 
function loadUserData() {
   const data = fetchDataSync('/api/user'); // UI freezes here
   updateUI(data);
   }

// Now: Non-blocking with callbacks 
async function loadUserData() {
   const response = await fetch('/api/user');
   const data = await response.json();
   updateUI(data);
   }



Doing the hard task only once after things stop changing
When implementing a live search feature
function waitBeforeSearch() {
  let timer;
 
  return function (text) {
    clearTimeout(timer);
    timer = setTimeout(() => performSearch(text), 300);
  };
} API calls without Freezing the UI
// Previously: Freezing UI while waiting for data 
function loadUserData() {
   const data = fetchDataSync('/api/user'); // UI freezes here
   updateUI(data);
   }

// Now: Non-blocking with callbacks 
async function loadUserData() {
   const response = await fetch('/api/user');
   const data = await response.json();
   updateUI(data);
   } API calls without Freezing the UI // Previously: Freezing UI while waiting for data 
function loadUserData() {
   const data = fetchDataSync('/api/user'); // UI freezes here
   updateUI(data);
   }

// Now: Non-blocking with callbacks 
async function loadUserData() {
   const response = await fetch('/api/user');
   const data = await response.json();
   updateUI(data);
   } // Previously: Freezing UI while waiting for data 
function loadUserData() {
   const data = fetchDataSync('/api/user'); // UI freezes here
   updateUI(data);
   }

// Now: Non-blocking with callbacks 
async function loadUserData() {
   const response = await fetch('/api/user');
   const data = await response.json();
   updateUI(data);
   } Doing the hard task only once after things stop changing
When implementing a live search feature
function waitBeforeSearch() {
  let timer;
 
  return function (text) {
    clearTimeout(timer);
    timer = setTimeout(() => performSearch(text), 300);
  };
} Doing the hard task only once after things stop changing When implementing a live search feature function waitBeforeSearch() {
  let timer;
 
  return function (text) {
    clearTimeout(timer);
    timer = setTimeout(() => performSearch(text), 300);
  };
} function waitBeforeSearch() {
  let timer;
 
  return function (text) {
    clearTimeout(timer);
    timer = setTimeout(() => performSearch(text), 300);
  };
} Important parts to note Call Stack: Where the function executes (the "chef cooking")
Callback Queue: Tasks waiting (Orders)
Microtask Queue: Higher Priorities (Promises, Observers) Call Stack: Where the function executes (the "chef cooking") Call Stack Callback Queue: Tasks waiting (Orders) Callback Queue Microtask Queue: Higher Priorities (Promises, Observers) Microtask Queue Here is a rule to remember Never block the call stack with synchronous long-running operations. If you need to process long tasks, you can Use web workers
Break tasks into smaller chunks with setTimeOut or requestIdleCallBack
User async/await for Input-Output operations Use web workers Break tasks into smaller chunks with setTimeOut or requestIdleCallBack setTimeOut requestIdleCallBack User async/await for Input-Output operations async/await Getting to understand the JavaScript event loop and concurrency model has helped me to build more responsive applications. No freezing interfaces even during heavy processing because I now properly schedule task in different queues. Mastering the event loop and concurrency model means understanding exactly when and why your code executes, which make a better and more responsive application.

How I Mastered JavaScript Event Loop and Concurrent Model

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 Reasons Why Less Is More in Your init/deinit Methods

10 Best Practices for Every React Developer

10 Best Practices for Using Kubernetes Network Policies

12 Essential Coding Standards for Quality Web Development

12 Essential Django Programming Tips for Developers

13 Tools To Try On Your Next Javascript Based Project

10 Reasons Why Less Is More in Your init/deinit Methods

10 Best Practices for Every React Developer

10 Best Practices for Using Kubernetes Network Policies

12 Essential Coding Standards for Quality Web Development

12 Essential Django Programming Tips for Developers

13 Tools To Try On Your Next Javascript Based Project

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps