浅析异步回调

最原始的写法-同步写法

所有操作同步单线进行

//最原始的写法-同步写法
 
f1(); //耗时很长，严重堵塞
f2(); //f2需要用用到f1
f3(); //导致f3执行受到影响

异步回调

//改进版-异步写法
function f1(callback){
　　setTimeout(function () {
　　　　// f1的任务代码
　　　　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()执行完后才会输出abc 如果f1()f2()执行时间很长，f3()就会一直延迟

异步

这里因为f1()的执行时间太长，所以将f1异步放到最后去执行

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()  // 最后出现，用时很长 4999999950000000
f2()  // 0 
f3()  // abc

因为异步了，在执行f2()的时候，a和b的值都是0，所以f2()最后是0，但这不是我们想要的结果，我们想同时不影响整个执行，又要得到正确的f2()结果

异步回调

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

按这样的步骤理解起来应该就比较清晰了