专栏首页卡少编程之旅js线程机制的介绍和练习

js线程机制的介绍和练习

给定的几行代码,我们需要知道其输出内容和顺序。JavaScript是一门单线程语言,但有其独特的线程机制

热身代码:

setTimeout(function(){
    console.log('定时器开始啦')
});
new Promise(function(resolve){
    console.log('马上执行for循环啦');
    for(var i = 0; i < 10000; i++){
        i == 99 && resolve();
    }
}).then(function(){
    console.log('执行then函数啦')
});
console.log('代码执行结束');

JavaScript事件循环

  • 同步任务 -> 主线程 -> 任务顺序执行完毕
  • 异步任务 -> Event Table -> EventQueue(并入主执行线程)

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

JS引擎存在monitoring process进程,会持续不断的检查主线程执行栈是否为空,一旦为空,就会去Event Queue那里检查是否有等待被调用的函数。

定时器线程

  1. setTimeout这个函数,是经过指定时间后,把要执行的任务加入到Event Queue中,又因为是单线程任务要一个一个执行,如果前面的任务需要的时间太久,那么只能等着
  2. setTimeout(fn,0)的含义是,指定某个任务在主线程最早可得的空闲时间执行,只要主线程执行栈内的同步任务全部执行完成,栈为空就马上执行。
  3. setInterval会每隔指定的时间将注册的函数置入Event Queue,如果前面的任务耗时太久,那么同样需要等待。
  4. 对于setInterval(fn,ms)来说,我们已经知道不是每过ms秒会执行一次fn,而是每过ms秒,会有fn进入Event Queue。

一旦setInterval的回调函数fn执行时间超过了延迟时间ms,那么就完全看不出来有时间间隔了

Promise与process.nextTick(callback)

process.nextTick 指在node.js里面,事件循环的下一次循环中调用callback

除了广义的同步和异步任务,更精细的定义为:

macro-task(宏任务):包括整体代码script,setTimeout,setInterval micro-task(微任务):Promise,process.nextTick 接下来的主要介绍这两个任务的概念和线程表现:

  1. 这两种类型的任务会进入与之对应的EventQueue
  2. 事件循环的顺序,决定JS代码的执行顺序
  3. 先是进入整体代码的宏任务,开始事件循环,然后紧接着执行当前宏任务的微任务
  4. 执行完当前宏任务的微任务后 进入EventQueue里面的下一个宏任务

代码练习

我们来分析一段较复杂的代码,看看你是否真的掌握了JS的执行机制

console.log('1');
setTimeout(function() {
    console.log('2');
    process.nextTick(function() {
        console.log('3');
    })
    new Promise(function(resolve) {
        console.log('4');
        resolve();
    }).then(function() {
        console.log('5')
    })
})
process.nextTick(function() {
    console.log('6');
})
new Promise(function(resolve) {
    console.log('7');
    resolve();
}).then(function() {
    console.log('8')
})
setTimeout(function() {
    console.log('9');
    process.nextTick(function() {
        console.log('10');
    })
    new Promise(function(resolve) {
        console.log('11');
        resolve();
    }).then(function() {
        console.log('12')
    })
})

。 。 。 。 。 。

标准答案:1 7 6 8 2 4 3 5 9 11 10 12

总结:

  • JavaScript是一门单线程语言
  • Event Loop是JavaScript的执行机制
  • 针对Promise的知识,这里推荐一篇文章,非常值得一看

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Javascript一些优雅实现

    卡少
  • techniques about VsCode

    卡少
  • 手机adb命令学习

    卡少
  • JavaScript 常见面试题分析(二)

    ④ call() 方法 apply() 方法 bind() 方法 (this 指向第一个参数)

    Nian糕
  • JS执行机制

    JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。这是因为Javascript这[ ]脚 本语言诞生的使命所致——JavaScri...

    星辰_大海
  • 【求职】字节跳动 前端

    瑞新
  • 异步流程控制:7 行代码学会 co 模块

    首先请原谅我的标题党(●—●),tj 大神的 co 模块源码200多行,显然不是我等屌丝能随便几行代码就能重写的。只是当今大家都喜欢《7天学会xx语言》之类的速...

    用户4962466
  • js程序设计02——变量、作用域问题

    首先,ECMAScript中的数据类型分为基本类型、引用类型,基本类型的访问操作是按值的。引用类型的值是保存在内存中的对象,操作对象时,实际上操作的是对象的引用...

    用户1141560
  • 前端MVC Vue2学习总结(七)——ES6与Module模块化、Vue-cli脚手架搭建、开发、发布项目与综合示例

    使用vue-cli可以规范项目,提高开发效率,但是使用vue-cli时需要一些ECMAScript6的知识,特别是ES6中的模块管理内容,本章先介绍ES6中的基...

    张果
  • 10分钟了解JS堆、栈以及事件循环的概念

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

    用户2356368

扫码关注云+社区

领取腾讯云代金券