Great question—your guess is actually spot-on, but let’s dive deeper into exactly why this happens, since it ties into how jQuery’s animation system and browser event loops work.

First, How jQuery’s .animate() Works #

When you call $('.selector').animate(...), jQuery doesn’t run the animation immediately. Instead, it adds the animation task to the element’s internal animation queue. The browser will process these queued tasks one at a time when the main thread is free—this is part of the browser’s event loop system, which handles UI updates, JavaScript execution, and async tasks.

Let’s Break Down the Two Loops #

1. The Infinite while(true) Loop

while (true) { 
  $('.selector') 
    .animate({ 'bottom': '30px' }, 500) 
    .animate({ 'bottom' : '20px' }, 500); 
}

This is a synchronous infinite loop. Here’s what happens:

• The loop runs non-stop, blocking the browser’s main thread entirely. It never gives the browser a chance to process the animation queue or update the UI.
• Every iteration of the loop adds two more animation tasks to the queue. Since the loop never ends, the queue grows infinitely—constantly consuming more and more memory.
• Eventually, the browser runs out of memory or can’t keep up with the endless task queue, leading to a crash.

2. The Finite while(a < 1000) Loop

var a = 0; 
while (a < 1000) { 
  $('.selector') 
    .animate({ 'bottom': '30px' }, 500) 
    .animate({ 'bottom' : '20px' }, 500); 
  a++; 
}

This loop runs exactly 1000 times, adding 2000 total animation tasks to the queue. Once a hits 1000, the loop exits:

• Now the main thread is free, so the browser’s event loop can start processing the queued animations one by one.
• Even though the queue is long, it’s finite—memory usage stays manageable, and the browser can work through all the tasks without crashing.

Key Takeaway #

Synchronous infinite loops like while(true) are dangerous because they hog the main thread and allow no room for the browser to handle any other work (including rendering, processing async tasks, or even garbage collection). When combined with code that adds tasks to a queue, it’s a recipe for memory exhaustion and crashes.

内容的提问来源于stack exchange，提问作者Marcos Di Paolo