ES6异步编程——任务队列和事件循环

任务指的是js代码中运行的代码。

一个函数就是一个任务，有一个函数fn，fn()代表fn任务运行、脚本也是一个任务、计时器也是一个任务 、 Promise也是一个任务。

任务又可分为同步的任务和异步的任务

同步任务：任务按照代码的执行顺序执行，执行完上一个任务才会执行下一个任务。

例如：

<script>
    console.log(0)
    function fn(){
        console.log(111)
    }
    var a=1
    console.log(a)
    fn()
    /*
    按照顺序执行
    打印：0
          1
          111
    */
</script>

 异步任务：任务不按照代码的顺序执行，程序执行到异步任务时，新开一个线程运行，将异步任务放到新开的线程内运行，当子线程中的任务全部运行完毕后，将异步任务的运行结果（即异步函数的运行结果）传入回调函数，当主线程的任务全部运行完毕后，将回调函数传回主线程运行。

异步任务队列：又可分为异步宏任务队列和异步微任务队列。

异步任务的队列优先级: 异步宏任务先执行 然后在执行异步微任务

注意：任务开启后，内部执行的时候可能会有新的任务，例如：执行计时器时，内部可能就有同步任务和异步微任务。

我们运行的js脚本就是一个宏任务，当脚本运行时，是执行的第一个宏任务。

然后的执行的顺序：

1、先执行同步任务

2、添加新的宏任务到队列中，添加新的异步微任务到队列中

3、执行异步微任务

重复以上操作，就形成了事件循环。

接下来我们就练习一下：

在练习之前，需要说明一下Promise是我们在学习异步编程时才接触的一个构造方法，很多人会以为它是异步的，其实new Promise是同步的，只有知道了这一点才能做对题；还有一点：先到队列中的任务先执行。

<script>
   console.log(4) //同步
		setTimeout(() => { //异步宏
			setTimeout(()=>{console.log(6)},0) //异步宏
			console.log(1) //同步
			var p2 = new Promise((n1, n2) => {
				n1(1000)
			})
			p2.then(()=>{console.log(7)}) //异步微
		}, 0)
		setTimeout(() => {
		    setTimeout(() => {console.log(2)}, 200) //异步宏
			var p3 = new Promise((n1, n2) => {
				n1(1000)
			})
			p3.then(()=>{console.log(8)})//异步微
			console.log(2)//同步
		}, 0)
		var p1 = new Promise((n1, n2) => {
			n1(1000)
		})
		p1.then(() => {console.log(3)})//异步微
		console.log(5) //同步
</script>

执行结果： 4 5 3 1 7 2 8 6 2

<script>
  	setTimeout(() => {
				console.log(0);
			});
			new Promise(resolve => {
				console.log(1);
				setTimeout(() => {
					resolve(); //这里！！！！！！！
					var p1=new Promise((n1,n2)=>{n1(20)})
					p1.then(() => console.log(2));
					console.log(3);
					setTimeout(()=>{console.log(9)},0)
				});
				new Promise((n1,n2)=>{n1(20)}).then(() => console.log(4));
			}).then(() => { //这里的then函数要等resolve()执行后才能执行  一点注意！！！
				console.log(5);
				var p2=new Promise((n1,n2)=>{n1(20)})
				p2.then(() => console.log(8));
				setTimeout(() => console.log(6));
			});
			console.log(7);
</script>

 执行结果：1 7 4 0 3 5 2 8 9 6