同步（sync）与异步(async)编程

版权声明：转载请备注原文链接 https://blog.csdn.net/lemon_0227/article/details/84578476

同步与异步

同步：在进程中任务未结束时需等待结束才能执行下一个任务 
异步：在进程中任务未结束但在等待的过程中可先去执行下一个任务
js是属于单线程，所以我们最好采用异步编程
单线程：所有的任务由一个线程来完成  
多线程：多个任务可分配给不同的线程来完成

js中的异步编程：

1.定时器属于异步编程（到时间点后才开始执行，当时间设置为0也不会立即执行=> 浏览器有延迟时间：谷歌：5~6ms IE：10~13ms）
2.事件绑定属于异步编程（事件触发时才执行）
3.回调函数也可理解为异步编程
4.在AJAX中可以使用异步编程

同步异步案例理解

        //案例一
        var count = 0;
        window.setTimeout(function () {
            count++;
            console.log(count);//后输出=>1  1000ms后
        }, 1000);
        console.log(count); //先输出=>0
        //案例二
        var count = 0;
        window.setTimeout(function () {
            count++;
            console.log(count);//后输出=>1  不会立马执行，需要等待一段时间 谷歌：5~6ms IE：10~13ms 
        },0);
        console.log(count); //先输出=>0
        //案例三
           var count = 0;
        window.setTimeout(function () {
            count++;
            console.log(count); //不输出：因为线程一直被死循环占用，定时器需要一直等待着
        },1000);
        console.log(count); //先输出=>0
        while(1){
            //死循环
        }
        //案例四
        window.setTimeout(function () {
            console.log('a'); //再输出a
        },10);
        window.setTimeout(function () {
            console.log('b');  //先输出b  因为在等待队列中是按时间排序的 时间短的先执行 
        },6);
        var i=0;
        while(i<1000000000){
            i++;
        }

AJAX中的同步与异步编程

AJAX中的同步：当AJAX任务开始时（xhr.send），一直需要到 READY STATE===4的时候任务才结束，才可以执行下一个任务
AJAX中的异步：当AJAX任务开始时（xhr.send），不需要等待READY STATE===4,期间可以执行其他任务，当READY STATE===时，再做相关操作

AJAX中的三部曲

var xhr=new XMLHttpRequest();
xhr.open("GET","/list",true);
/*
        xhr.onreadystatechange=function(){
            if(xhr.readystate===4&&xhr.status===200){
                ......
            }
        }
        */
xhr.send(null);//只有send之后AJAX任务（向服务器发送请求）才开始

AJAX中案例理解

        //案例一
        var xhr=new XMLHttpRequest(); //readyState===0
        xhr.open("GET","./a.json",true); //readyState===1
        xhr.onreadystatechange=function(){  //绑定事件
            console.log(xhr.readyState); //输出： 2 3 4
        }
        xhr.send(null); //任务开始 1->2->3->4 

        //案例二
        var xhr=new XMLHttpRequest(); //readyState===0
        xhr.open("GET","./a.json",false); //readyState===1
        xhr.onreadystatechange=function(){  //绑定事件
            console.log(xhr.readyState); //输出：4 （同步） 当请求结束 readyState==4时才输出  ajax本身是异步方法 （xhr保存开始时值1，当任务结束时值为4 状态码由1->4 输出4）
        }
        xhr.send(null); //任务开始 1->2->3->4 

        //案例三
        var xhr=new XMLHttpRequest(); //readyState===0
        xhr.open("GET","./a.json",true); //readyState===1
        xhr.send(null); //任务开始 1->2->3->4 
        xhr.onreadystatechange=function(){  //绑定事件
            console.log(xhr.readyState); //输出：2 3 4 （异步->不需要等待状态码为4 ->直接执行以下任务）
        }

        //案例四
        var xhr=new XMLHttpRequest(); //readyState===0
        xhr.open("GET","./a.json",false); //readyState===1
        xhr.send(null); //任务开始 1->2->3->4 
        xhr.onreadystatechange=function(){  //绑定事件
            console.log(xhr.readyState); // 无输出 （同步->状态码已为4时才添加事件->状态码不再改变触发事件->无输出）
        }

获取服务器时间

状态码（readyState）为2时就需进行的操作（需异步）  =>如获取响应头中的服务器时间（Date）=> 可应用于电商网站倒计时抢购（若用客户端时间则用户可更改客户端时间） 
虽状态码为4时可获取服务器响应头中的时间，但状态码从2->3->4占大量时间 当状态码为2时获取可节省时间 减小时间误差 

    var xhr = new XMLHttpRequest(); //readyState===0
    xhr.open("HEAD", "./a.json", true); //readyState===1 
    xhr.setRequestHeader("H51806","fang"); //客户端设置请求头信息到a.json上->服务器端获取 （需写在open方法后）
    xhr.timeout="1000";//设置AJAX请求的超时时间（若为同步编程，请求时间超过设置时间时放弃请求，执行下列任务）
    /*
        常用HTTP方法：
            GET:一般用于从服务器获取数据（给服务器数据少，获取数据多，此方法最常用）->问号传参
            POST:一般用于推送数据给服务器（给服务器多，获取少）  ->请求主体传参
            PUT:一般用于给服务器增加资源文件（上传图片功能）
            DELETE:一般用于从服务器删除资源文件
            HEAD:一般用于获取服务器响应头信息
        这些请求方式不管是哪一种都可以向服务器获得或者传递数据，且从本质意义上无区别，只是行业内被开发者人约定俗成了各自不同的用处，并非标准。
    */
    xhr.onreadystatechange = function () { //绑定事件
            if (xhr.readyState === 2) {
                // xhr.getResponseHeader=>客户端获取服务器的响应头信息 
                var time = xhr.getResponseHeader("Date");  
                console.log(time); //输出的为格林尼治时间（GMT）
                console.log(new Date(time)); //输出为中国标准时间（GMT+0800）
            }
        }
    xhr.send(null);