JS中setTimeout是如何实现的

我们知道 Javascript引擎是单线程的,而setTimeout方法的作用是延后执行目标代码,同时还可以继续往下执行

setTimeout是如何实现的?

这涉及到了浏览器内核的事件循环模型,在Javascript引擎之外,有一个任务队列,当执行到setTimeout时,延时方法会交给内核其他模块处理(与执行引擎主线程独立),当延时方法到达触发条件,这一延时方法被添加至任务队列里,执行引擎在主线程方法执行完毕后,会从任务队列中顺序获取任务来执行,这一过程是一个不断循环的过程,称为事件循环模型

下面通过一段示例代码,看一下整个执行过程

console.log('1');
setTimeout(function test(){
  console.log('2');
},5000);
console.log('3');

执行过程

(1)log('1')入栈执行

(2)setTimeout test入栈执行 交由webapis处理

(3)log('3')入栈执行

(4)在setTimeout方法执行5秒后,timer模块检测到延时处理方法到达触发条件,于是将延时处理方法加入任务队列

(5)执行引擎的执行栈为空后,引擎开始轮询检查任务队列是否有任务需要被执行,就检查到延时方法test,于是将延时方法加入执行栈,test方法调用了log()方法,于是又将log(2)方法入栈执行,输出2,之后清空执行栈

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2015-10-23

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

express框架模块导入与导出

经过3天nodejs的原生学习,今天转入到express框架学习.express与nodejs的关系类似于jquery和js关系,很大程度上方便了我们的开发!

851
来自专栏随心DevOps

Python,Shell 和 三个标准文件

场景 使用 Python 执行 Shell 命令(或者脚本),有两种执行场景: 等待,直到命令执行完毕,一次性获取返回结果,做一些你想做的事情; 命令执行的同时...

3946
来自专栏黄Java的地盘

旧项目TypeScript改造问题与解决方案记

由于本次改造的项目为一个通过NPM进行发布的基础服务包,因此本次采用TypeScript进行改造的目标是移除Babel全家桶,减小包体积,同时增加强类型约束从而...

7861
来自专栏Python中文社区

Python还能做这个?真的好棒棒耶!

專 欄 ❈爱撒谎的男孩,Python中文社区专栏作者 博客:https://chenjiabing666.github.io ❈ 准备 好吧,其实我想说的是如...

2278
来自专栏破晓之歌

python之调用系统命令 原

os模块包装了不同操作系统的通用接口,使用户在不同操作系统下,可以使用相同的函数接口,返回相同结构的结果。

3524
来自专栏zhangdd.com

testlink报错“ask administrator to update localization file(< testlink_root >/locale/zh_CN/texts.php) –

testlink报错“ask administrator to update localization file(<testlink_root>/locale/...

1072
来自专栏用户2442861的专栏

Python入门笔记(15):对文件的操作(1)

http://www.cnblogs.com/BeginMan/p/3166644.html

831
来自专栏PHP在线

10个字符串相关的PHP代码片段

1、自动移除字符串中的 HTML 标记 在用户表单中,你可能希望移除所有不必要的 HTML 标记。使用 strip_tags() 函数可以简单地做到这一点: $...

3407
来自专栏CRPER折腾记

VS Code 折腾记 - (6) 基本配置/快捷键定义/代码片段的录入(snippet)

更加详细的可以阅读这里: 你可以看到when的具体范围解释,非常详细。。这里我就不一一列举出来了。。。直接在链接的文章内搜索when Clause Contex...

972
来自专栏linux运维学习

linux学习第十七篇:vim介绍,颜色显示,移动光标,复制剪切粘贴

VIM VIM颜色显示和移动光标 VIM一般模式下移动光标 一般模式下复制剪切粘贴 ---- VIM介绍 vi这个命令,它是linux中必不可少的一个工具。没...

2298

扫码关注云+社区

领取腾讯云代金券