如何在JavaScript中仅使用setTimeout()方法实现代码按顺序输出1、2、3、4

Hey there! Let's break down how to tweak those setTimeout calls to get the exact sequential output you want.

First, Why the Original Code Doesn't Behave as Expected #

In your original code:

(function() { 
  console.log(1); 
  setTimeout(function(){console.log(2)}, 1000); 
  setTimeout(function(){console.log(3)}, 0); 
  console.log(4); 
})();

• Synchronous code runs first: console.log(1) and console.log(4) fire immediately, so you see 1 then 4 right away.
• The two setTimeout callbacks get added to the macro task queue. The one with 0ms delay is scheduled to run as soon as the main thread is free, so it fires before the 1000ms one—hence you get 3 then 2 next (you might have mixed up the order in your question, but no worries!).

The Reliable Fix: Nested setTimeout Calls #

To get 1, 2, 3, 4 in strict order, we need to ensure each subsequent callback only runs after the previous one has completed. The most foolproof way to do this with just setTimeout is to nest them:

(function() {
  console.log(1);
  // Trigger console.log(2) once the main thread is free
  setTimeout(function() {
    console.log(2);
    // Only schedule console.log(3) after the above callback finishes
    setTimeout(function() {
      console.log(3);
      // Finally, run console.log(4) once the previous step is done
      setTimeout(function() {
        console.log(4);
      }, 0);
    }, 0);
  }, 0);
})();

How This Works #

• console.log(1) runs synchronously first.
• The first setTimeout adds its callback to the task queue; once the main thread is free, it runs console.log(2), then immediately schedules the next setTimeout for console.log(3).
• This chain continues: each setTimeout is only scheduled after the previous callback executes, guaranteeing the order 2 → 3 → 4.

Alternative: Incremental Delays (Less Reliable) #

You could also set increasing delays for each setTimeout, like this:

(function() {
  console.log(1);
  setTimeout(function(){console.log(2)}, 0);
  setTimeout(function(){console.log(3)}, 10);
  setTimeout(function(){console.log(4)}, 20);
})();

But this is less reliable because JavaScript timers aren't perfectly precise—small delays might overlap depending on the runtime environment. Nested calls are always safer for guaranteed sequential execution.

内容的提问来源于stack exchange，提问作者Shariq