用定时器实现JavaScript异步执行

逆战班学习心得

JavaScript是一门基于对象的弱类型语言，它作为浏览器脚本语言，主要用途是负责与页面的交互，以及操作DOM，它的执行环境是单线程的，默认情况JS是同步加载的，也就是 JS的加载是阻塞的，也就是说同一时间只能完成一件事，只能自上而下执行,万一上一行解析代码的时间很长,那么下面的代码就会被阻塞。对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验。

为了解决这个问题，利用多核CPU的计算能力，于是出现了同步和异步

同步操作，任务遵循队列顺序，异步操作，就相当于并线了，因此异步任务不具有阻塞效应。同步任务都是在主线程中执行,形成了一个执行栈，直到主线程空闲时,才会去事件队列中查看是否有可执行的异步任务,如果有就推入主进程中。

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

一旦用了setTimeout()，里面的回调函数就是异步代码，加入了任务队列，延时调用一个函数不马上执行，而是要等待主队列为空，并达到定的延时时间才会执行，而且只会执行一次。

我们来通过下面一个例子来理解

setTimeout(function(){
console.log("1")
},500)
console.log("2")
setTimeout(function(){
console.log("3")
},300)
setTimeout(function(){
console.log("5")
},0)
console.log("4")

 

上面一段代码的输出结果为

2

4

5

3

1

从输出结果中，我们就可以看书JS执行的顺序，2和4都为主队列的同步任务，一开始就执行，执行顺序是从上到下。

setTimeout()中的函数，无论写在JS代码中的哪个位置，设置的时间即使是0，都为异步执行，在任务队列中，从主线程执行一开始，就进行计时，一旦主线程空闲，时间短的就立即加入到主线程开始执行，时间长的依然在等待。所以根据设定的等待时间，执行顺序为5,3,1

利用setInterval（）实现异步执行

定时器的执行原理与延时器相似，只是不清除定时器，他就会反复执行。

console.log("1")
setInterval(function(){
console.log("2")
},300)
console.log("3")

总结，异步执行的两个必要条件就是

1.  主队列空闲     
2.  到达执行时间