专栏首页call_me_RJavaScript 事件循环机制

JavaScript 事件循环机制

javascript是一门单线程的非阻塞的脚本语言。单线程意味着javascript在执行代码的任何时候,都只有一个主线程来处理所有的任务。

那么javascript引擎是如何实现这一点的呢?

因为事件循环(event loop)。先上图:

图片解读:

  • 同步和异步任务分别进入不同的执行场所,同步的进入主线程,异步的进入Event Table并注册函数
  • 当指定的事情完成时(重点)Event Table会将这个函数移入Event Queue
  • 主线程内的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行
  • 上述的过程会不断的重复,也就是常常说的Event Loop(事件循环)

简单例子

我们来一个简单的例子来说明下:

console.log('1');
setTimeout(() => {
	console.log('2');
}, 0)
console.log('3');
复制代码

上面的代码将输出下面的结果:

1
3
2

因为setTimeout是一个异步的任务,所以会在最后才执行。

那么,我们来个复杂点的例子:

复杂例子

 console.log('1');
 setTimeout(() => {
 	console.log('2')
 }, 1000);
 new Promise((resolve, reject) => {
 	setTimeout(() => {
 		console.log('3');
 	}, 0);
 	console.log('4');
 	resolve();
 	console.log('5');
 }).then(() => {
 	console.log('6');
 });
 console.log('7');
复制代码

上面的代码输出的结果是:

1
4
5
7
6
3
2

看到这代码的时候是不是有些蒙圈?在我们揭开谜底之前,先来了解下微任务和宏任务

微任务和宏任务

微任务和宏任务都是异步的任务,他们都属于队列,主要区别是它们的执行顺序--微任务会比宏任务先执行。

宏任务包含有:setTimeout, setInterval, setImmediate, I/O, UI rendering

微任务包含有:process.nextTick, promise.then, MutationObserver

嗯~回到上面的代码,如下:

 console.log('1');
 setTimeout(() => {
 	console.log('2')
 }, 1000);
 new Promise((resolve, reject) => {
 	setTimeout(() => {
 		console.log('3');
 	}, 0);
 	console.log('4');
 	resolve();
 	console.log('5');
 }).then(() => {
 	console.log('6');
 });
 console.log('7');
复制代码

在执行到new Promise的时候会立马新建一个promise对象并立即执行。所以会输出 1,4,5,而then则会在Event Table中注册成回调函数并放在微任务队列中,而两个setTimeout(输出3)和setTimeout(输出2,1s后完成的啊)会被先后注册成回调函数并放在宏任务队列中。

理解了上面的一些原理之后,我们再来练下手...

console.log(1)
process.nextTick(() => {
  console.log(8)
  setTimeout(() => {
    console.log(9)
  })
})
setTimeout(() => {
  console.log(2)
  new Promise(() => {
    console.log(11)
  })
})
let promise = new Promise((resolve,reject) => {
  setTimeout(() => {
    console.log(10)
  })
  resolve()
  console.log(4)
})
fn()
console.log(3)
promise.then(() => {
  console.log(12)
})
function fn(){
  console.log(6)
}
复制代码

得到的结果是:

1
4
6
3
8
12
2
11
10
9

客官可以画下图整理下思路,然后代码运行验证一下啊?

参考&后话

文章首发javascript事件循环机制,更多的内容,请戳我的博客进行了解,能留个star就更好了?

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【译】9个强大的JavaScript技巧

    但是,如果站点无法在用户的Internet Explorer 11浏览器中运行,他们不会在乎我的优化代码。

    嘉明
  • 【译】9个强大的JavaScript技巧

    但是,如果站点无法在用户的Internet Explorer 11浏览器中运行,他们不会在乎我的优化代码。

    嘉明
  • 谈谈JavaScript中装箱和拆箱

    在JavaScript里面有个引用类型叫做基本包装类型,它包括String、Number和Boolean。那么它和基本的类型String、Number和Bool...

    嘉明
  • 深入理解JavaScript的事件循环(Event Loop)

    在两个环境下的Event Loop实现是不一样的,在浏览器中基于 规范 来实现,不同浏览器可能有小小区别。在Node中基于 libuv 这个库来实现

    书童小二
  • setTimeout 是到了xx ms 就执行吗,了解浏览器的 Event-Loop 机制

    最近看了波 JavaScript 相关的文章,不得不说,JavaScript 我还真没玩明白(给我哭~。。。?)。也挺久没写文了,实习(“摸?”)之余小记一波。

    Cloud-Cloudys
  • 10分钟了解JS堆、栈以及事件循环的概念

    其实一开始对栈、堆的概念特别模糊,只知道好像跟内存有关,又好像事件循环也沾一点边。面试薄荷的时候,面试官正好也问到了这个问题,当时只能大方的承认不会。痛定思痛,...

    用户2356368
  • 记两道关于事件循环的题

    这里的关键其实是搞清楚 await async2() 做了什么事情。我以为在 async1 内部,async2 被调用之后,就会继续往后执行,因此是先打印 as...

    Chor
  • JavaScript之Event Loop

    先看段代码: console.log(1); setTimeout(function () { console.log(2); new Pr...

    laixiangran
  • 前端基础进阶(十二):深入核心,详解事件循环机制

    JavaScript的学习零散而庞杂,因此很多时候我们学到了一些东西,但是却没办法感受到自己的进步,甚至过了不久,就把学到的东西给忘了。为了解决自己的这个困扰,...

    :::::::
  • 十四、深入核心,详解事件循环机制

    JavaScript的学习零散而庞杂,很多时候我们学到了一些东西,但是却没办法感受到进步!甚至过了不久,就把学到的东西给忘了。为了解决自己的这个困扰,在学习的过...

    用户6901603

扫码关注云+社区

领取腾讯云代金券