浅谈js运行机制

前言

因为js的运行机制十分重要，理解起来也十分抽象，仍还是在这里做个记录，加深自己的记忆。

总之，希望本文的内容能够对您的学习或者工作有所帮助。另，如果有任何的错误或者不足请指正!

如何理解js单线程

用大白话来讲，就是同一个时间只能做一件事

什么是任务队列

javascript

console.log(1)
setTimeout(()=>{
    console.log(3)
},0)
console.log(2)

首先我们看下上面的代码，大家猜一下输出的是什么呢？

如果你回答的是 1 2 3,那么恭喜你，答对了，我们说说为什么他输出的是123呢，明明我的setTimeout设置为0了啊

这里我们可以引申出一个新的概念，js的任务队列

js的任务队列：因为js是单线程的，所以同一个时间只能做一件事，当js遇到异步任务的时候要先把异步任务挂起，js往后继续执行，同步任务执行完毕，然后再执行异步任务

ps:据说HTML5标准规定

1. setTimeout的最短时间间隔是4毫秒

2. setInterval的最短间隔时间是10毫秒，也就是说，小于10毫秒的时间间隔会被调整到10毫秒

什么是事件循环（Event Loop）

javascript

for(var i = 0;i<4;i++){
    setTimeout(()=>{
        console.log(i)
    },1000)
}

这里输入的又是什么呢?先说答案，4个4

从上面可知道，同步任务执行就会执行任务队列了。那么，执行到了异步任务就一定会放到任务队列吗?其实不然。

浏览器中有个定时器模块，只有当时间到了才会把setTimeout放到异步队列中。

所以for循环在执行的过程中，并没有把setTimeout真正的放到异步队列中，异步队列中没有东西，只有当时间到了，才会把他扔到异步队列中，异步队列再等待一个叫事件循环的东西来执行。

上面说到了事件循环，那他到底是什么呢？

事件循环：

1. 所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。

2. 主线程之外，还存在一个”任务队列”（task queue）。只要异步任务有了运行结果，就在”任务队列”之中放置一个事件。

3. 一旦”执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。

4. 主线程不断重复上面的第三步。

异步任务有哪些

1. setTimeout和setInterval

2. DOM事件

3. AJAX

4. Promise