js 事件循环机制 EventLoop
js 的非阻塞I/O 就是由事件循环机制实现的
众所周知 js是单线程的 也就是上一个任务完成后才能开始新的任务
那js碰到ajxa和定时器、promise这些异步任务怎么办那?这时候就出现了事件队列。
js的主要执行栈 称为主栈
用ajax举例:
代码执行的时候如果遇到ajax怎么办,ajax事件的实现 是浏览器上的一个功能或者说是线程,当js主栈执行到ajax事件,js会告诉浏览器让浏览器去请求,然后js主栈不会去等ajax是否请求成功,js主栈继续执行,等所有js的同步任务执行完之后,js主栈就会读取这个“事件队列”了,把事件队列里面的第一个事件,压入主栈执行,那么事件队列的里的事件是怎么来的那?(主线程从"事件队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环))
刚才说过js的主栈执行到ajax事件,js会告诉浏览器让浏览器去请求,然后浏览器请求并且返回结果,那么那他会把,ajax的回调函数放到事件队列的尾部,ajax完成时间是不定的,如果网络延迟它可能很慢才有结果,这个时候 js的主栈把所有任务都执行完毕了,而且因为ajax没有返回结果,那么js主栈的主栈会循环不断的查看事件队列里面有没有可执行的事件(回调函数),也就是说ajax什么时候返回,js主栈什么时候执行ajax的回调函数。(其他的异步任务也是一样的,promise是直接把当前的回调函数放到事件队列里面)
上面说的事件循环机制,就形成为了非阻塞I/O。
下面举个例子来测试一下吧:


这里说明下,setTimeout()也是浏览器上的,他没有设置时间,但是setTimeout()最快执行速度3毫秒(注意这里说的是最快执行速度)说明他的时间是不准确的。
Promise是立刻向事件队列里面添加一个回调函数,所以比setTImeout快。这也就能解释他的执行顺序了。
刚才我说setTimeout 执行时间是不准确的,如果设置setTimeout 执行时间是5毫秒,是因为他最后执行完是向事件队列里面添加的,如果我的主栈的的代码计算量庞大,是10毫秒,那么你们想想,执行setTimeout回调的时间不就是10毫秒了吗?
js 事件循环机制 EventLoop的更多相关文章
- js事件循环机制辨析
对于新接触js语言的人来说,最令人困惑的大概就是事件循环机制了.最开始这也困惑了我好久,花了我几个月时间通过书本,打代码,查阅资料不停地渐进地理解他.接下来我想要和大家分享一下,虽然可能有些许错误的 ...
- js事件循环机制 (Event Loop)
一.JavaScript是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决 ...
- JS 事件循环机制 - 任务队列、web API、JS主线程的相互协同
一.JS单线程.异步.同步概念 从上一篇说明vue nextTick的文章中,多次出现“事件循环”这个名词,简单说明了事件循环的步骤,以便理解nextTick的运行时机,这篇文章将更为详细的分析下事件 ...
- Node.js 事件循环机制
Node.js 采用事件驱动和异步 I/O 的方式,实现了一个单线程.高并发的 JavaScript 运行时环境,而单线程就意味着同一时间只能做一件事,那么 Node.js 如何通过单线程来实现高并发 ...
- js事件循环机制(Event Loop)
javascript从诞生之日起就是一门 单线程的 非阻塞的 脚本语言,单线程意味着,javascript代码在执行的任何时候,都只有一个主线程来处理所有的任务,非阻塞靠的就是 event lo ...
- js事件循环机制
本文参考链接:https://www.jianshu.com/p/cf47bc0bf2ab 一.先搞懂两个东西:堆和栈 栈由操作系统自动分配释放,用于存放函数的参数值.局部变量等一些基本的数据类型,其 ...
- JS:事件循环机制、调用栈以及任务队列
点击查看原文 写在前面 js里的事件循环机制十分有趣.从很多面试题也可以看出来,考察简单的setTimeout也就是考察这个机制的. 在之前,我只是简单地认为由于函数执行很快,setTimeout执行 ...
- Netty源码解析 -- 事件循环机制实现原理
本文主要分享Netty中事件循环机制的实现. 源码分析基于Netty 4.1 EventLoop 前面分享服务端和客户端启动过程的文章中说过,Netty通过事件循环机制(EventLoop)处理IO事 ...
- 对javascript EventLoop事件循环机制不一样的理解
前置知识点: 浏览器原理,浏览器内核5种线程及协作,JS引擎单线程设计推荐阅读: 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 [FE]浏览器渲染引擎「内核」 js异步编程,Promise ...
随机推荐
- 编程数学(A-2)-次方
百度百科:次方. 特别是一个数的负次方需要注意.
- 移动端click事件延迟300ms该如何解决
window.addEventListener( "load", function() { FastClick.attach( document.body ); }, fa ...
- webview的设置
设置支持js: webView.getSettings().setJavaScriptEnabled(true); 设置无图模式: webView.getSettings().setBlockNetw ...
- poj 3233 Matrix Power Series 矩阵求和
http://poj.org/problem?id=3233 题解 矩阵快速幂+二分等比数列求和 AC代码 #include <stdio.h> #include <math.h&g ...
- hdu - 2266 How Many Equations Can You Find (简单dfs)
http://acm.hdu.edu.cn/showproblem.php?pid=2266 给一个字符串和一个数n,在字符串中间可以插入+或者 -,问有多少种等于n的情况. 要注意任意两个数之间都可 ...
- POJ2632 Crashing Robots 解题报告
Description In a modernized warehouse, robots are used to fetch the goods. Careful planning is neede ...
- 安卓常见错误Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace.
Unable to execute dex: java.nio.BufferOverflowException. Check the Eclipse log for stack trace. 导入新的 ...
- Ubuntu 16.04安装Redis
版本:4.0.2 下载地址:https://redis.io/download 离线版本:(链接: https://pan.baidu.com/s/1bpwDtOr 密码: 4cxk) 安装过程: 源 ...
- io计算
http://www.cnblogs.com/yalong_xiang/archive/2011/11/15/2249530.html ぬ儱←OWEN★ windows下如何查看磁盘IO性能 复制 ...
- easyui webuploader 文件上传演示
webuploader 上传首页 webuploader 上传前页面 webuploader 上传中页面 图就不上传了,状态会编程上传中 webuploader 已上传页面