前端的异步和并发

同步与异步的区别

异步：指的是当发送请求后，在请求返回结果之间的时间，我们称之为异步。举例说明：前端访问接口一般用的是ajax，那么ajax在发送请求后，是需要等待接口那边返回数据的，在等待的这段期间我们称之为异步。

既然有提到异步，那么就肯定有同步。

js本身是单线程的，是从从头往下，执行完上一行才会执行下一行，这个按照顺序执行方式就叫做同步。

当执行代码遇到异步的时候，不会影响同步的执行，同步还是会往下执行，但是异步的结果是比同步慢的，这个就是涉及到事件循环的技术了。

例如下边这一段代码可以说明同步和异步：


        console.log(1) //同步

        $.ajax({ //异步  需要请求接口，等待接口返回数据
            url:"https://wwww.zhongyin.net.cn/api",
            success(res){
                
            }
        });
        console.log(2);//同步

异步与并发的区别

并发：是指同时多个非同步的请求。例如如下代码：


    $.ajax({...});//异步1
    $.ajax({...});//异步2
    $.ajax({...});//异步3

异步1，异步2，异步3是同时请求的，至于谁先返回结果，这个是无法确定的。这个同时请求的就叫做并发

异步：异步是指请求后，请求结果返回的这段时间，我们称之为异步。


    $.ajax({//执行1
        url:"https://wwww.zhongyin.net.cn/api",
        success(res){//执行2
            
        }
    });

在执行1 和执行2 之间的时间我们称之为异步。

如何解决并发的问题

并发容易出现的问题

如下代码：输出的a到底是哪个返回的值，是无法判断的,因为我们根本就不知道哪条并发线先返回结果。

所以我们不知道a的值是由谁返回的。


    var a;

    $.ajax({
        url:"https://wwww.zhongyin.net.cn/api",
        success(res){//执行2
            a=res.data;
        }
    });
    $.ajax({
        url:"https://wwww.zhongyin.net.cn/api",
        success(res){//执行2
            a=res.data;
        }
    });

有如下集中解决办法：

多个变量储存异步结果

这个理解起来也是比较简单的，定义两个变量，变量a存储第一个ajax返回的结果。变量2存储第二个ajax返回的结果。

只要并发不出现对同一个变量操作，那么变量之间就不会出现混乱。


    var a;
    var b;


    $.ajax({
        url:"https://wwww.zhongyin.net.cn/api",
        success(res){//执行2
            a=res.data;
        }
    });
    $.ajax({
        url:"https://wwww.zhongyin.net.cn/api",
        success(res){//执行2
            b=res.data;
        }
    });

    setTimeout(function(){
        if(a){ //只要是a存在，那么a的结果肯定是第一个ajax的返回结果
            console.log(a);
        }
        if(b){//只要是b存在，那么b的结果肯定是第二个ajax返回结果
            console.log(b);
        }
    },10000);

同门方法

就是指几个并发同时达标以后，才能一起迈进一个门槛。

例如有2个变量，只有两个都有返回结果，那么才能执行某一个方法。在现实开发中，这样的场景其实比较多的。

核心在于最后那一个达标了，那么才能都达标，才能够执行某一个方法。

如下代码：


    var a;
    var b;

    function door(){
        console.log(a+b);
    }

    $.ajax({
        type:"https://wwww.zhongyin.net.cn/api",
        success(res){
            a=res.data;
            if(a&&b){ //如果a和b都存在则执行door方法
                door();
            }
        }
    });
    $.ajax({
        type:"https://wwww.zhongyin.net.cn/api",
        success(res){
            b=res.data;
            if(a&&b){ //如果a和b都存在则执行door方法
                door();
            }
        }
    });

两个ajax异步方法，不管哪一个先执行，只有最后的ajax返回结果时，条件才能够满足，才能执行具体的方法