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

作者: 蓝海00 | 来源:发表于2019-06-22 17:02 被阅读15次

这是假象!!!!

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真的是异步的吗????

    这是假象!!!! 1⃣️、单线程 JavaScript语言的执行环境是单线程的 所谓单线程就是同一时间只能做一件事...

  • 异步编程(二)

    setTimeout setTimeout设置的时间一定准确吗?为什么 不一定。 setTimeout是异步函数,...

  • requestAnimationFrame实现动画

    setTimeout跟requestAnimationFrame的区别 setTimeout是异步执行的,遇到同步...

  • React 异步,同步?

    一.如何获取异步的结果 二. setState一定是异步吗? (1) 在setTimeout或者原生dom事件中,...

  • setTimeout异步

    简单解释单线程、任务队列的概念 单线程:JavaScript是一个单线程语言,浏览器只会分配一个js引擎线程来解析...

  • JavaScript 坑与技巧:异常

    异常 异步错误处理 用try包裹setTimeout()是无效的:原因就在于调用setTimeout()函数时,传...

  • setTimeout 的一点理解

    setTimeout,延时触发。用法示例 首先,理解 setTimeout 是一个函数方法,接收两个参数,会异步加...

  • JS同步和异步

    最基础的异步是setTimeout和setInterval函数很常见,但是很少人有人知道其实这就是异步,因为它们可...

  • this.setState是同步还是异步

    1、在组件的生命周期或者React合成事件中,是异步 2、在setTimeout或者原生dom事件中,是同步 异步...

  • javascript事件循环

    异步任务栈分为: 宏任务(macrotask): setTimeout setImmediate setInter...

网友评论

    本文标题:setTimeout真的是异步的吗????

    本文链接:https://www.haomeiwen.com/subject/yvxvqctx.html