• javascript中异步,同步解析


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

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

    //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在所有文件加载完之后再执行。
  • 相关阅读:
    Navicat连接mysql1862错误your password has expired.To log in you must change itusing a client that supports expired passwords
    机器学习听课 | 目录 | 00
    Git实战 | 其他 | 04
    练手SQL数据 | 目录 | 00
    练手SQL数据 | 区域自关联 | 02
    蓝桥杯训练 | 数学和简单DP | 03
    Python基础 | linux下Python的安装 | 03
    Java基础 | 目录 | 00
    初级-MySQL经典练习题及答案,常用SQL语句练习50题
    MYSQL必知必会-SQL语句查询
  • 原文地址:https://www.cnblogs.com/94-Lucky/p/13284129.html
Copyright © 2020-2023  润新知