doA(function(){
  doB();
  doC(function() {
    doD();
  })
  doE();
});
doF();

excution order

doA() -> doF() -> doB() -> doC() -> doE() -> doD()

I don't understand why the execution order is as above...:(

CodePudding user response：

The order the functions are executed depends on how doA and doC call their respective callbacks

Synchronously

function doA(cb) { console.log('doA'); cb(); }
function doB() { console.log('doB'); }
function doC(cb) { console.log('doC'); cb(); }
function doD() { console.log('doD'); }
function doE() { console.log('doE'); }
function doF(cb) { console.log('doF');}

doA(function(){
  doB();
  doC(function() {
    doD();
  })
  doE();
});
doF();

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

or Asynchronously

function doA(cb) { console.log('doA'); setTimeout(cb); }
function doB() { console.log('doB'); }
function doC(cb) { console.log('doC'); setTimeout(cb); }
function doD() { console.log('doD'); }
function doE() { console.log('doE'); }
function doF(cb) { console.log('doF');}

doA(function(){
  doB();
  doC(function() {
    doD();
  })
  doE();
});
doF();

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

I think maybe you need to watch this video.

https://www.youtube.com/watch?v=8aGhZQkoFbQ