最原始的寫法-同步寫法

所有操作同步單線進行

//最原始的寫法-同步寫法
 
f1(); //耗時很長，嚴重堵塞
f2(); //f2需要用用到f1
f3(); //導(dǎo)致f3執(zhí)行受到影響

異步回調(diào)

//改進版-異步寫法
function f1(callback){
　　setTimeout(function () {
　　　　// f1的任務(wù)代碼
　　　　callback();
　　}, 1000);
}
f1(f2); //
f3();

舉個例子

//舉例
var a=0;
var b=0;
function f1(){
  for(var i=0; i<100000000; i++){
  a += i;
  }
  b = a+1;
  console.log(a);
}
function f2(){console.log(b)}
function f3(){console.log('abc')}
f1()  //  4999999950000000  這一步拉長了時間
f2()  //  4999999950000001
f3()  //  abc  

需要等f1() f2()執(zhí)行完后才會輸出abc 如果f1()f2()執(zhí)行時間很長，f3()就會一直延遲

異步

這里因為f1()的執(zhí)行時間太長，所以將f1異步放到最后去執(zhí)行

var a=0;
var b=0;
function f1(callback){
  setTimeout(function(){   
    for(var i=0; i<100000000; i++){
    a += i;
    }
    b = a+1;
    console.log(a);
    callback()
  },0)
}
function f2(){console.log(b)}
function f3(){console.log('abc')}
f1()  // 最后出現(xiàn)，用時很長 4999999950000000
f2()  // 0 
f3()  // abc

因為異步了，在執(zhí)行f2()的時候，a和b的值都是0，所以f2()最后是0，但這不是我們想要的結(jié)果，我們想同時不影響整個執(zhí)行，又要得到正確的f2()結(jié)果

異步回調(diào)

var a=0;
var b=0;
function f1(callback){
  setTimeout(function(){
    for(var i=0; i<100000000; i++){
      a += i;
    }
    b = a+1;
    console.log(a);
    callback()
  },0)
}
function f2(){console.log(b)}
function f3(){console.log('abc')}
f1(f2)
f3() //立刻輸出abc 然后過一段時間才輸出f1(f2) 4999999950000000 4999999950000001

按這樣的步驟理解起來應(yīng)該就比較清晰了