Description

If a then() handler is added to the animation promise (the first argument of the start callback), jQuery gets stuck in an endless loop. The website becomes unresponsive, the CPU usage jumps to 100% and the memory consumption increases significantly and steadily. Eventually, the process crashes with an "Out of Memory" error.

$elem.animate({left: 350}, {
  start: animation => {
    animation.then(() => console.log('end'));
  }
});

We discovered this problem when we executed multiple animations simultaneously with queue: false. We stored the animation promises from the individual start callbacks and used them to wait for all animations to complete with $.when. When we added another then() handler to the combined promise, the bug appeared.

Further observations:

• The problem only occurs when a then() handler is added to the animation promise from the start() callback. It does not occur when handler is added to the promise returned by promise(). It does not occur when a done() handler is used.
• To pause the infinite loop, a breakpoint can be set in the mightThrow function.
• Otherwise, the loop can only be stopped by closing the browser tab or killing the corresponding process with the browser's task manager.

We have created a small demo page to reproduce the problem, see below. Tick the first two checkboxes to start the infinite loop.

jQuery: 3.7.1
Browsers: Chrome 127, Edge 127, Firefox 129
OS: Windows 10

Link to test case

https://output.jsbin.com/febijutiva

jquery-animate-promise.html.txt