JS中的异步机制详解及示例

1、同步

1. 概念：
   • JS是单线程语言
   • 即：上一行代码执行结束后，才会执行下一行代码，90%以上的代码都是同步代码
2. 示例：

// 示例1：
           console.log(1); 
           console.log(2); // 一定是先执行1，再执行2
  
// 示例2：
           console.log(1); 
       // 如果出现了执行耗时非常长的同步代码，程序也会等待
           for(var i = 0 ; i < 10000000; i ++){ 
       // 这种同步代码无论执行多长时间，后面的代码都会一直等，直到执行结束后才会继续向下执行      
           }
           console.log(2); // 先执行完1后，即使for循环非常长，也会等着for循环结束再执行2

2、异步

2.1、创建原因

1. JS创建异步机制来应对不确定执行时长的场景，
2. 我们会让这些场景的回调函数在同步程序执行结束后，再去执行，也就是：控制执行顺序

2.2、特殊情况

1. 事件机制—不点击则不执行代码
2. 定时器机制，如果设置时间过长会导致等待时间过长
3. 网络请求机制，网络不好则不执行后面代码

2.3、回调函数

1. 上面3种特殊情况下产生的机制都有一个函数
2. 因为这些函数都会在同步程序执行结束后，回头才调用，因此把这些函数称为：回调函数
3. 这些函数中的代码，称为：异步顺序执行的代码
4. 示例：

console.log(1);
setTimeout( function(){ // js会把setTimeout传入的函数标记为异步函数，
                        // 执行顺序是在同步程序执行结束后再去执行，这里的同步程序为：console.log
   console.log(2);
} , 0) 
console.log( 3 ); // 实际执行顺序为：1，3，2

2.4、同步程序

• 同步程序：不被回调函数包裹的程序都是同步程序

2.5、异步机制示例

console.log(1);
for(var i = 0 ; i < 10 ; i ++){
    setTimeout( function(){
         console.log( i ); // 最后执行 ==> 打印10次   
                           // 不被延时器包裹时：打印i的值为0~9
    } , 10 )
}
console.log(2) // 打印顺序为1，for循环1-10，2，延时器

// 解析：为什么在异步程序中打印了10次10 
// 分析：定时器内部函数是异步顺序执行的，所以在内部函数执行的时候，循环已经执行结束了，for循环执行结束后 i值为10，所以在异步程序之中访问i值结果只有10
// 注意：有了异步机制后，看到的代码编写顺序，不一定是代码的执行顺序

3、补充—面试题

1. 问题：定时器如果设置成2000ms，一定会执行吗？
2. 回答：不一定，要看同步机制是否执行结束
3. 示例：

console.log(11111111); 
setTimeout(function(){
     console.log("异步机制");
},0) // 这里即使把间隔时间设置成了0，依然是先执行打印11111，然后生成延时器(此时不会打印)，再打印222222，最后再打印"异步机制"
// 可以理解成：同步是只要到了就要执行，而异步是要等同步执行结束后才会执行
 console.log(22222222);