js 事件循环机制 EventLoop

时间:2022-12-17 02:26:42

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。

  下面举个例子来测试一下吧:

js 事件循环机制  EventLoop

js 事件循环机制  EventLoop

  这里说明下,setTimeout()也是浏览器上的,他没有设置时间,但是setTimeout()最快执行速度3毫秒(注意这里说的是最快执行速度)说明他的时间是不准确的。

  Promise是立刻向事件队列里面添加一个回调函数,所以比setTImeout快。这也就能解释他的执行顺序了。

  刚才我说setTimeout 执行时间是不准确的,如果设置setTimeout 执行时间是5毫秒,是因为他最后执行完是向事件队列里面添加的,如果我的主栈的的代码计算量庞大,是10毫秒,那么你们想想,执行setTimeout回调的时间不就是10毫秒了吗?

js 事件循环机制 EventLoop的更多相关文章

  1. js事件循环机制辨析

     对于新接触js语言的人来说,最令人困惑的大概就是事件循环机制了.最开始这也困惑了我好久,花了我几个月时间通过书本,打代码,查阅资料不停地渐进地理解他.接下来我想要和大家分享一下,虽然可能有些许错误的 ...

  2. js事件循环机制 (Event Loop)

    一.JavaScript是单线程单并发语言 什么是单线程 主程序只有一个线程,即同一时间片断内其只能执行单个任务. 为什么选择单线程? JavaScript的主要用途是与用户互动,以及操作DOM.这决 ...

  3. JS 事件循环机制 - 任务队列、web API、JS主线程的相互协同

    一.JS单线程.异步.同步概念 从上一篇说明vue nextTick的文章中,多次出现“事件循环”这个名词,简单说明了事件循环的步骤,以便理解nextTick的运行时机,这篇文章将更为详细的分析下事件 ...

  4. Node.js 事件循环机制

    Node.js 采用事件驱动和异步 I/O 的方式,实现了一个单线程.高并发的 JavaScript 运行时环境,而单线程就意味着同一时间只能做一件事,那么 Node.js 如何通过单线程来实现高并发 ...

  5. js事件循环机制(Event Loop)

    javascript从诞生之日起就是一门  单线程的  非阻塞的  脚本语言,单线程意味着,javascript代码在执行的任何时候,都只有一个主线程来处理所有的任务,非阻塞靠的就是 event lo ...

  6. js事件循环机制

    本文参考链接:https://www.jianshu.com/p/cf47bc0bf2ab 一.先搞懂两个东西:堆和栈 栈由操作系统自动分配释放,用于存放函数的参数值.局部变量等一些基本的数据类型,其 ...

  7. JS:事件循环机制、调用栈以及任务队列

    点击查看原文 写在前面 js里的事件循环机制十分有趣.从很多面试题也可以看出来,考察简单的setTimeout也就是考察这个机制的. 在之前,我只是简单地认为由于函数执行很快,setTimeout执行 ...

  8. Netty源码解析 -- 事件循环机制实现原理

    本文主要分享Netty中事件循环机制的实现. 源码分析基于Netty 4.1 EventLoop 前面分享服务端和客户端启动过程的文章中说过,Netty通过事件循环机制(EventLoop)处理IO事 ...

  9. 对javascript EventLoop事件循环机制不一样的理解

    前置知识点: 浏览器原理,浏览器内核5种线程及协作,JS引擎单线程设计推荐阅读: 从浏览器多进程到JS单线程,JS运行机制最全面的一次梳理 [FE]浏览器渲染引擎「内核」 js异步编程,Promise ...

随机推荐

  1. tornado简单的验证码

    1.html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  2. UVA 305 Joseph (约瑟夫环 打表)

     Joseph  The Joseph's problem is notoriously known. For those who are not familiar with the original ...

  3. 学习笔记: JavaScript&sol;JQuery 的cookie操作

    转自:http://blog.csdn.net/barryhappy/archive/2011/04/27/6367994.aspx cookie是网页存储到用户硬盘上的一小段信息.最常见的作用是判断 ...

  4. 【java学习笔记】线程

    1.线程的定义 ①继承Thread类,将执行的任务逻辑放到run方法中,调用start方法来开启线程 public class ThreadDemo { public static void main ...

  5. 基于Dockerfile镜像制作的基本操作

    一.使用Dockerfile制作镜像 前面的博客中已经介绍了如何基于容器制作镜像,此方法的原理是使用一个正在运行的容器,根据生产所需进行配置更改等操作后,使其满足生产环境,再将这个容器打包制作为镜像, ...

  6. 南大算法设计与分析课程OJ答案代码(2)最大子序列和问题、所有的逆序对

    问题 A: 最大子序列和问题 时间限制: 1 Sec  内存限制: 4 MB提交: 184  解决: 66提交 状态 算法问答 题目描述 给定一整数序列 a1, a2, …, an,求 a1~an 的 ...

  7. linux Ubuntu系统安装百度aip

    1.下载百度api pip install baidu-aip 2.配置视频转码工具ffmpeg Ubuntu16.04下安装FFmpeg(超简单版) 第一步:添加源. sudo add-apt-re ...

  8. cocos2d-x 开发用到的工具

    1.VertexHelper 可用于多边形顶点的计算,可视化定点编辑器,用它创建的顶点信息可以直接导出为Box2D可使用的代码 https://github.com/jfahrenkrug/Verte ...

  9. 机器学习基础 --- pandas的基本使用

    一.pandas的简介 Python Data Analysis Library 或 pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的.Pandas 纳入了大量库和一些 ...

  10. AHOI2012 信号塔 &vert; 最小圆覆盖模板

    题目链接:戳我 最小圆覆盖. 1.枚举第一个点,考虑当前圆是否包含了这个点,如果没有,则把圆变成以这个点为圆心,半径为0的圆. 2.枚举第二个点,考虑圆是否包含了这个点,如果没有,则把圆变成以这两个点 ...