JavaScript同步、异步

JavaScript同步和异步(初解)

0.概述

JavaScript语言的一大特点是单线程，也就是说，同一个时间只能做一件事，这是因为JavaScript这门脚本语言诞生的使命所致，JavaScript是为处理页面中的用户交互，以及操作DOM而诞生的，比如我们对某一个DOM元素进行操作和删除，不能同时进行，应该先进行添加，之后再删除。

1.单线程问题

单线程就意味着所有任务需要排队，前一个任务结束，才会执行后一个任务，这样所导致的问题就是：如果js执行时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。

    <script>
        //第一个问题
        console.log(1);
        setTimeout(function(){
            console.log(3);
        },10000);

        console.log(2);
        //如果按照单线程执行    先打印1 等待10秒再打印3 之后再打印2
    </script>

未解决这个问题，利用多核CPU的计算能力，HTML5提出了Web Worker标准，允许JavaScript脚本创建多个线程，于是出现了同步和异步。

2.同步

前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的。

3.异步

如果执行一件事所需时间过长，在做这件事的同时，还可以去处理其他事情。

1.同步、异步任务

1.同步任务

同步任务都在主线程上执行，形成一个执行栈，执行栈中存放了同步任务队列

2.异步任务

js的异步是通过回调函数实现的。

常见三种异步任务：

1. 普通事件，click、resize。

2. 资源加载，load、error。

3. 定时器，setTimeout、setInterval。

异步任务相关的回调函数添加到异步任务队列中

3.js的执行机制

1. 先执行执行栈中的同步任务。

2. 异步任务（回调函数）放入异步任务队列中。

3. 一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取异步任务队列中的异步任务，于是读取的异步任务结束等待状态，进入执行栈，开始执行。

执行机制解读：

    <script>
        console.log(1);
        document.onclick = function(){
            console.log('click');
        }
        console.log(2);
        setTimeout(function(){
            console.log(3);
        },3000);
    </script>

​ //1. 先打印1

​ //2. document.onclick = function 属于异步任务，先提交给异步进程，等待点击鼠标，只有点击鼠标才会放入异步任务队列中。不点击不会放入异步任务队列中。

​ //3. 再打印2

​ //4. setTimeout属于异步任务，也是先放到异步任务进程，当3秒时间到了就放入异步任务队列，等同步任务执行完后就将执行异步任务放入执行栈中执行 再打印3

​ //5.此时点击，触发点击事件 将异步进程放入异步任务队列，然后执行栈检查同步任务是否执行完，执行完后执行点击事件（如果在三秒之前点击就先执行点击事件）

​ //6.再次点击 将异步进程放入异步任务队列，然后执行栈检查同步任务是否执行完，执行完后执行点击事件

​ // 尽管同步任务执行完，但是他还是会回到异步任务队列检查是否有异步任务，有，就执行异步任务

​ // 整个过程称之为任务循环