Promise.then是否异步？

Question

The following code hangs on Firefox and Chrome but not on Edge:

let sequence = Promise.resolve();
function fire() {
  sequence.then(fire)
};
fire();

I think it didn't hang on Firefox a few versions ago, I'm confused. What is the correct behavior here?

Edit: Edge 37.14316 now hangs too.

Answer 1

Yes, Promise.then is async, but when you resolve the promise right away, and then keep calling the same function inside the callback, you get an infinite loop, and the browser hangs

In simpler terms, you're doing

function fire() {
   fire(); // goes on forever
}
fire();

The only difference is fire is in an asynchronous callback that is already resolved, and fires right away.

If Edge doesn't hang, it's just because it can handle the recursion better.

Answer 2

The correct behaviour is to hang ¹ . You won't get a stack overflow, but asynchronous infinite recursion is still infinite recursion.

_{1: It's an endless loop in the microtask queue. Other promise jobs might get to run, but not much else.}

Answer 3

It hangs because .then chains execute on the microtask queue, unlike eg setTimeout which executes on the main JavaScript event queue:

let sequence = Promise.resolve();
function fire() {
  setTimeout(fire); // doesn't hang
};
fire();

Most browsers empty the microtask queue completely at the tail of the current run-to-completion, and your code prevents it from ever emptying, stalling the main JavaScript event queue.

The browser isn't totally hung, since users can stop this out-of-control script after a while. How usable the browser feels during this period depends on whether the browser supports multiple processes or not. Eg Firefox Developer Edition fares better than Firefox here, since dev edition uses multiple processes.