setTimeout真的是异步的吗????

这是假象!!!!

1⃣️、单线程

JavaScript语言的执行环境是单线程

所谓单线程就是同一时间只能做一件事情 如果有多件事件就必须排队 后面的事情必须等前面的事情完成后才能执行

这种单线程的模式的好处就是实现起来比较简单 执行环境相对单纯
坏处是 只要有一个任务耗时很长 后面的任务都必须排队等待 会拖延整个程序的执行 如:
浏览器无响应(假死) 往往就是因为某一段代码长时间运行 (如死循环) 导致整个页面都卡在了这个地方 其他代码无法执行

那么为什么JavaScript不能有多个线程呢?

JavaScript作为浏览器的脚本语言 最主要的用途就是与用户进行交互 这决定了它只能是单线程 否则就会带来很复杂的同步问题
如: 假设JavaScript同时有两个线程 一个线程在删除一个元素 另一个线程又在这个元素上添加内容 那么这个时候浏览器该如何处理呢?
因为不能确定在同时执行这两段代码时 删除元素一定在添加内容之后 如在之前就会报错
所以 为了避免复杂性 从一诞生 JavaScript就是单线程的


2⃣️、验证

简单两点聊异步: 不阻塞主线程 同时执行
通过一段代码来解释 setTimeout 不是异步的

console.log(111)
setTimeout(() => {
    console.log(222);
}, 3000)
console.log(333)
setTimeout(() => {
    console.log(444);
}, 0)
console.log(555)
setTimeout(() => {
    console.log(666);
}, 1000)

最后控制台输出的结果是

111
333
555
444 // 等待0秒
666 // 等待1秒
222 // 等待3秒

从这段代码执行的顺序以及执行的时间可以看出
虽然setTimeout没有阻塞主线程 但也没有同时执行 在执行完1 3 5后才执行等待时间后的4 6 2 所以不能说setTimeout是异步的 它虽满足了没有阻塞主线程 但是它也等待了 等待主线程全部执行完成后再执行

那么为什么setTimeout执行的时候并没有阻塞主线程呢???? 这都归功于浏览器的任务队列


3⃣️、任务队列

在JavaScript中 所有的任务可以分为两种 一种是同步任务(synchronous)另一种是异步任务(asynchronous)
同步任务指: 在主线程上排队执行的任务 只有前一个任务执行完毕后 才能执行下一个任务
异步任务指: 不进入主线程 而进入 任务队列(task queue)的任务 等主线程的任务全部执行完成后 主线程会通过event loop(事件循环) 去询问任务队列中是否有可以被执行的任务了 如果有可以被执行的任务 这个时候这个任务就会被放进 主线程执行

下面这张图就更详细的解释了主线程和任务队列的关系

至此 setTimeout并不是异步的 而是JavaScript在执行的时候 会将setTimeout放入任务队列 等待主线程的执行(不阻塞主线程)全部执行完成后 再通过event loop去询问任务队列中是否有可执行的代码 再继续放入主线程中执行 故产生了异步的假象。

你可能感兴趣的:(setTimeout真的是异步的吗????)