javascript中异步，同步解析

Posted 2020-12-17 94Lucky

关于异步和同步的理解，我说说作为一个前端程序员的理解

首先，我们要明白什么是同步，什么是异步。
同步:代码从上往下执行，执行完上面，下面的才执行。
异步:上面代码没执行完，下面代码也开始执行。
光说是无力地，直接代码举例子，先说同步。

//1.入门案例
var a=1;
var b=2;
var s=a+b;
console.log(s);  s=3   //先解析a,然后是b,然后是s，顺序执行，所以这个是同步的
//有不懂得，可以换个顺序试试
var a=1;
var s=a+b;
var b=2;
console.log(s)    //NaN   可以看到，当执行a+b时,b还没执行，所以是顺序执行的，同步

//2.进阶案例
console.log("1")
   for(var i=0;i<10000;i++){
        console.log("aaa");
   }     
    console.log("2")
//   1   aaa  2       for循环中涉及到了时间的延迟，但打印还是顺序的，所以也是同步的
//可以看出，即使涉及到了时间延迟，for还是同步

//3.高级案例
 console.log("a");
 document.onclick=function(){
     console.log("b");
   }
 console.log("c");    //  结果: a c b
//看打印结果，很多人会认为不是同步的，但实际上 结果是 a b c，只是由于这里加了点击事件
//所以，点击事件是同步的

同步的就说这么多,作为一个前端程序员来说，异步才是重点，下面说一说异步。
异步是执行是，不是按照从上往下的顺序执行，经常是由于时间等待造成的后面代码先前面代码执行。

//1.入门案例
 setTimeout(() => {
      console.log("aaa");
 }, 100);
 setTimeout(()=>{
      console.log("bbb");
 },50)   //结果:     bbb    aaa     可以很清楚的看到后面代码先执行，所以是异步
//2.进阶案例
for (var i=0;i<10;i++){
    setTimeout(()=>{
        console.log(i)    // 结果是10 因为即使设置了0秒，但也是时间延迟了，等到for循环完，setTimeout等待的10次才执行，所以是打印是10 个10 
      },0)
      setTimeout((i)=>{
        console.log(i)    // 结果是0123456789  因为setTimeout里函数的参数在时间外，所以函数的参数是同步的。
      },0,i)
}
//3.高级案例   图片的加载是需要时间的，所以是异步的,为了能够更好计算,需要把异步变成同步。
      var s=loadHandler();
        console.log(s)

        var arr=["1.png","37.png"]
        var list=[];
        var img=new Image();
        img.src="./img/"+arr[0];
        var num=0;
        img.addEventListener("load",loadHandler);

        function loadHandler(){
            var m=this.cloneNode(false);
            list.push(m);
            num++;
            if(num>arr.length-1){
                console.log(list.reduce((value,item)=>value+item.width,0));
                return;
            }
            this.src="./img/"+arr[num];
        }
//预加载是典型的异步变同步，处理图片加载问题的方法。


关于异步，还要一点需要提的是页面加载的过程，在做项目时，每个人都会在html页面中引入js文件和css文件，那么，这些
文件和html标签的加载顺序到底是怎样的，很少人会去在意。因为我们的页面加载的文件都很小，即使出现问题，也无伤大雅，
但是如果文件大了呢？？？

//js文件的引入,也就是<script>标签，我是在head部分引入的，说的也是这里引入的问题，如果有人引入地方不一样，请忽略我说的问题。      
//在html页面规定，script标签的执行是同步的(异步阻断)

//容易出现的问题
1.
<script src="./js/a.js" async defer></script>
<script src="./js/b.js"></script>       //只要a文件加载完，才会加载b文件  如果在时候在js中有对body里面标签的操作，就会报错，因为这时候还没body
//async  这个单词专门解决这个问题   可以使script的加载变成异步的，这样就可以在js文件中操作标签   
2.css文件的引入,<link> 的加载是异步的，即使放在js文件后，也是和js文件一同加载，这样就会造成加载拥塞问题(加载拥塞:加载的过程中通道是固定的，但是会默认js文件
的加载通道很大，这样css文件的就很小，等到js文件加载完，所有文件都不在加载了。常见的情况是:浏览网页时，没有一点样式进去，特别丑)
//为了解决加载拥塞的问题:defer 这个词很专业,让script在所有文件加载完之后再执行。