Tools: Why Do Clicks “Stack Up” When JavaScript Blocks the UI?

The Short Answer: OS Input Buffering ## 1️ Hardware Level ## 2️ OS Level ## 3️ Browser Level ## Why Do They Execute After the Loop? ## The Big Insight ## Why This Matters I recently noticed something interesting while experimenting with JavaScript. I wrote a simple synchronous loop that runs for about 10 seconds: During those 10 seconds, the UI completely freezes. That part makes sense. But here’s the interesting part: While the loop was running, I kept clicking a button on the page. Nothing happened. No console logs. No UI updates. Then the loop finished… And suddenly, all my clicks fired at once. It felt like the browser had “saved” them somewhere. So what’s actually happening? When JavaScript runs a heavy synchronous task, the main thread (Call Stack) is blocked. But JavaScript freezing does not mean your entire system freezes. When you click your mouse, the hardware sends an interrupt signal to the Operating System. The OS records that click in its input buffer. Even if your browser tab is busy, the OS is still fully operational. The browser receives those events from the OS and places them into the Macrotask Queue (also called the Callback Queue). The Event Loop cannot check the Macrotask Queue until the Call Stack is empty. During the 10-second loop: After the loop finishes: That’s why everything fires at once. JavaScript is single-threaded. But your Operating System is not. Even when your JavaScript is frozen, the OS is still collecting user input and handing it to the browser. The browser politely queues those events until JavaScript is ready again. Understanding this helps explain: It also makes the Event Loop feel less magical and more mechanical. Sometimes weird UI behavior isn’t magic — it’s just how the system is designed. Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse CODE_BLOCK: const start = Date.now(); while (Date.now() - start < 10000) { // Block for 10 seconds } Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: const start = Date.now(); while (Date.now() - start < 10000) { // Block for 10 seconds } CODE_BLOCK: const start = Date.now(); while (Date.now() - start < 10000) { // Block for 10 seconds } - The Call Stack is busy. - The Event Loop is stuck. - It literally cannot move to the next “tick” to process events. - The Call Stack clears. - The Event Loop runs again. - It sees all the queued click events. - It processes them one by one. - Why heavy synchronous code freezes the UI - Why clicks seem to “stack up” - Why long-running tasks should be avoided on the main thread - Why Web Workers exist