setTimeout的执行顺序问题?

Question

为什么下面这段代码的输出是

success2
success1
Success: 12
success1

function double(value, success, failure) { 
 setTimeout(() => { 
   try { 
     if (typeof value !== 'number') { 
       throw 'Must provide number as first argument'; 
     } 
     success(2 * value); 
     console.log('success1');
   } catch (e) { 
     failure(e); 
   } 
 }, 1000); 
}

const successCallback = (x) => { 
 console.log('success2');
 double(x, (y) => console.log(`Success: ${y}`)); 
}; 
const failureCallback = (e) => console.log(`Failure: ${e}`); 
double(3, successCallback, failureCallback);

Answer 1

把代码格式化了一下，并且去掉了未使用的代码之后再来看

function double(value, success) {
  setTimeout(() => {
    success(2 * value);
    console.log('success1');
  }, 1000);
}

const successCallback = x => {
  console.log('success2');
  double(x, y => console.log(`Success: ${y}`));
};

double(3, successCallback);

首先执行double(3, successCallback);

1秒之后输出console.log('success2');，double(x, y => console.log(`Success: ${y}`));需要等待1s再执行

所以double继续往下执行输出console.log('success1');

等待1s之后执行上方的double(x, y => console.log(`Success: ${y}`));，这时，函数double形参value值为2*3=6，形参success为一个console.log函数，所以执行success(2 * value);，输出Success: 12 (2*6)

紧接着继续往下输出console.log('success1');

函数执行完毕，过程就是这样了