1. 理论

JavaScript　是单线程的：

  浏览器执行JS脚本的时候，当js中的其中一环报错或者死循环，那么js就不会再继续往下执行了；直到这个问题被解决。

• 队列机制：JavaScript提供了一种机制，会将所有的定时器都放到一个队列里面，当主线程的代码执行完成之后再执行队列里面的代码。
• 宏任务：所有在主线程上执行的任务（除了异步函数以外的所有任务）。
• 微任务：异步函数/异步任务。
• 异步函数：如果一个异步函数被调用时，该函数会立即返回尽管该函数规定的操作任务还没有完成。

2. 流程图：

image.png

3. 描述：

js执行过程：

• 1. 首先执行，当执行宏任务的时候，如果发现有任务时，会将定时器添加到宏任务的任务队列里面，继续完成宏任务；
• 2. 当宏任务完成后，会检查是否有：
     * 2.1 如果，则执行后，再回到宏任务；
     * 2.2 如果，则回到宏任务；
• 3. 检查 里面有没有未完成的任务：
     * 3.1 如果，则执行后，结束js脚本的执行。
     * 3.2 如果，则结束js脚本的执行。

4. 相关实例：

4.1 请判断输出顺序：

                                    console.log("1");
                                    setTimeout(function() {
                                        console.log("3")
                                    }, 0);
                                    console.log("2");

输出顺序为 1,2,3

解析：
  页面中所有由setTimeout定义的操作，都将放在同一个队列中依次执行。而这个队列需要等到函数调用栈执行完毕后才会执行，并且按照其时延时间长短顺序执行代码！

4.2 请判断输出顺序：

            setTimeout(function(){
                console.log(a);
            },0);
            var a = 1;
            console.log(b);//undefined
            var b = 2;
            var c = 3;
            var d = 4;
            var e = 5;
            function fx(c){
                console.log(c);
            }
            function fn(e,d){
                console.log(d);
                setTimeout(function(){
                    console.log(e);
                },10);
            }
            setTimeout(function(){
                console.log(b);
            },20);
            fn(e,d);
            fx(c);

结果依次输出：undefined , 4 , 3 , 1 , 5 , 2

解析：

• 1. console.log()函数会在setTimeout函数之前执行，并且b在输出之前未被定义所以最先输出undefined；
• 2. 之后，会执行fn函数和fx函数，而fn函数内存在console.log函数，那么它将会先输出d的值4；
• 3. 然后，在fx函数内也存在console.log函数，同样会先输出c的值3；
• 4. 再来比较setTimeout函数时延长短，依次输出1，5，2。

总结

  页面中所有由setTimeout定义的操作，都将放在同一个队列中依次执行。而这个队列的执行时间需要等到函数调用栈执行完毕后才会执行，也就是等待所有的可执行代码执行完毕，才会轮到setTimeout执行其内部操作，并且按照其时延时间长短顺序执行代码！