Javascript异步机制

作者: 大雄的学习人生 | 来源:发表于2018-06-18 03:18 被阅读190次

Javascript作为一种单线程语言,是如何实现异步编程的呢?

相信不少人对Javascript单线程表示怀疑:为何单线程可以实现异步操作呢?其实Javascript确实是单线程的(我们不妨把这个线程称作主线程),但它实现异步操作的方式确实借助了浏览器的其他线程的帮助。那其他线程是怎么帮助Javascript主线程来实现异步的呢?答案就是任务队列(task queue)和事件循环(event loop)。

一、任务队列

首先,作为单线程语言,在Javascript中定义的任务都会在主线程中执行。但是并不是每个任务都会立刻执行,而这种不立刻执行的任务我们称作异步任务。相反,那些立刻执行的任务我们把它们称作同步任务。而这些异步任务都会交给浏览器的其他线程去执行,但是主线程需要了解这些异步任务执行的状态,才方便进行下一步操作。

打个比方,主线程准备做饭,所以下达一个异步任务去买菜,异步任务买完菜之后得告诉主线程:“我买完菜啦”,这个时候主线程才好开始做饭。

而我们知道因为Javascript是单线程,所以上述的“下一步操作”没法直接定义在主函数里(不然就被当做同步任务直接执行了),那这些应该定义在哪里呢?答案就是异步任务的回调函数中。在Javascript异步机制中,任务队列就是用来维护异步任务回调函数的队列。这样一个队列用来存放这些回调函数,它们会等到主线程执行完所有的同步函数之后按照先进先出的方式挨个执行。那么执行完任务队列之后呢?Javascript主线程就执行完毕了吗?当然不是,不然网页加载完毕之后,谁来处理后续与用户的交互事件(比如点击事件)呢?

二、事件循环

javascript_asyc.jpg
我们通过上图来更加形象的了解Javascript的异步机制。
执行同步任务 -> 检查任务队列中是否有任务 -> [有如果则执行] -> 检查任务队列中是否有任务 -> [有如果则执行] -> ......
可见主线程在执行完同步任务之后,会无限循环地去检查任务队列中是否有新的“任务”,如果有则执行。而这些任务包括我们在异步任务中定义的回调函数,也包括用户交互事件的回调函数。通过事件循环,Javascript不仅很好的处理了异步任务,也很好的完成了与用户交互事件的处理。因为在完成异步任务的回调函数之后,任务队列中的任务都是由事件所产生的,因此我们也把上述的循环过程叫做事件循环

三、异步机制实践

console.log('定时器去买菜吧')
setTimeout(function(){
    console.log('菜买完了,主线程去做菜吧')
}, 0)
console.log('你先去买菜,我先看个世界杯')

在浏览器中执行上述代码,兴许能更好地理解Javascript的异步机制。

四、总结

总而言之,Javascript单线程的背后有浏览器的其他线程为其完成异步服务,这些异步任务为了和主线程通信,通过将回调函数推入到任务队列等待执行。主线程所做的就是执行完同步任务后,通过事件循环,不断地检查并执行任务队列中回调函数。

相关文章

  • JS notebook goods

    JS 机制 JavaScript异步机制 Excuse me?这个前端面试在搞事! JavaScript 运行机制...

  • js的事件循环

    javascript是一个单线程语言,javascript分为同步机制及异步机制,其中同步机制是放在栈中,而异步机...

  • 异步/回调

    单线程的JavaScript 说起异步,就要先说说JavaScript运行机制。我们知道,JavaScript是单...

  • Javascript异步机制

    Javascript作为一种单线程语言,是如何实现异步编程的呢? 相信不少人对Javascript单线程表示怀疑:...

  • JavaScript异步机制

    众所周知,JavaScript是单线程,同一时刻只会有一段代码在运行。JavaScript又具有异步的特性,这二者...

  • JavaScript异步机制

    最近在忙着写React源码系列,写到第四篇——React Fiber,这篇还需要好好研究下才能写(๑•ᴗ•๑),今...

  • ES6(7)之Async和await

    先谈JavaScript的异步处理 JavaScript是一门单线程的编程语言,如果不设计异步处理的机制,很容易因...

  • ES6 Promise

    问题 JavaScript的Callback机制深入人心。而ECMAScript的世界同样充斥的各种异步操作(异步...

  • JS异步编程(2)-异步核心Event loop

    Event loop 是 JavaScript 异步编程的核心,通过事件循环机制,让单线程的 JavaScript...

  • 且听前端大牛为你解析:Node.js内部捕获异步错误的步骤,看不

    一、背景 众所周知,由于 JavaScript 特殊的 EventLoop 机制,由 Promise 异步产生错误...

网友评论

    本文标题:Javascript异步机制

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