Javascript 分析Javascript事件机制和Settimeout讲解

2023-05-16

线程

JavaScript特点就是单线程,理解是,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?

现在我们假设,JavaScript同时有多个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?

所以,为了避免复杂性,注定JavaScript就是单线程处理。

但是单线程有不好地方,单线程就意味着,所有任务需要排队进行处理,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就一直等着。

如果排队是因为计算量大,CPU忙不过来,倒也算了,但是很多时候CPU是闲着的,因为IO设备(输入输出设备)很慢(比如Ajax操作从网络读取数据),不得不等着结果出来,再往下执行。

JavaScript语言的设计者意识到,这时主线程完全可以不管IO设备,挂起处于等待中的任务,先运行排在后面的任务。等到IO设备返回了结果,再回过头,把挂起的任务继续执行下去。

任务队列

同步:如果在函数返回的时候,调用者就能够得到预期结果,那么这个函数就是同步的。

例如:console.log('Hi');

异步:如果在函数返回的时候,调用者还不能够得到预期结果,而是需要在通过一定的手段得到,那么这个函数就是异步的。

例如通过Ajax获取

任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。有没有对如何通知主线程存在疑惑???通知主线程的意思就是只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。利用主线程在队列中读取的事件来判断是哪个异步任务完成了。然后把它添加到主线程中来,执行他!

总结一下:

JS的执行机制就是一个主线程 + 一个任务队列。同步任务就是放在主线程上执行的任务,异步任务就是放在任务队列的任务。所有的同步任务都在主线程执行,这构成了一个执行栈,异步任务有了运行结果会在任务队列中放置一个事件,比如定时2秒,到2秒后才能放进任务队列(callback放进任务队列,而不是setTimeout函数放进队列)。脚本运行时,先依次运行执行栈,然后从队列中提取事件来运行任务队列中的任务,这个过程是不断重复的。所以叫事件循环(Event Loop)。

JavaScript的运行机制

只要主线程空了,就会去读取"任务队列",这就是我们说的JavaScript的运行机制。

事件和回调函数

"任务队列"是一个事件的队列,IO设备完成一项任务,就在"任务队列"中添加一个事件,表示相关的异步任务可以进入"主线程执行"了。主线程读取"任务队列",就是读取里面有哪些事件。

"回调函数"(callback),就是那些会被主线程挂起来的代码。异步任务必须指定回调函数,当主线程开始执行异步任务,就是执行对应的回调函数。

"任务队列"是一个先进先出的数据结构,排在前面的事件,优先被主线程读取。主线程的读取过程基本上是自动的,只要执行栈一清空,"任务队列"上第一位的事件就自动进入主线程。但是,如果存在"定时器"功能,主线程首先要检查一下执行时间,某些事件只有到了规定的时间,才能返回主线程。

Event Loop

主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)。

定时器

"任务队列"还可以放置定时事件,即指定某些代码在多少时间之后执行。这叫做"定时器"(timer)功能,也就是定时执行的代码。

它在"任务队列"的尾部添加一个事件,因此要等到同步任务和"任务队列"现有的事件都处理完,才会得到执行。

setTimeout()只是将事件插入了"任务队列",必须等到当前代码(执行栈)执行完,主线程才会去执行它指定的回调函数。要是当前代码耗时很长,有可能要等很久,所以并没有办法保证,回调函数一定会在setTimeout()指定的时间执行。

开始案例分析:

console.log('-----start-----');
setTimeout(function() {console.log('hello');}, 200);
setTimeout(function() {console.log('world');}, 100);
console.log('-----end-------');



    console.log(1);
    setTimeout(function() {console.log(2);}, 300);//timer1
    setTimeout(function() {console.log(3);}, 400);//timer2
    for (var i = 0; i < 10000; i++) {
        console.log(4);//大约需要4000ms的时间
    }
    setTimeout(function() {console.log(5);}, 100);//timer3


    console.log(1);
    setTimeout(function() {console.log(2);}, 400);
    setTimeout(function() {console.log(3);}, 300);
    for (var i = 0; i < 10000; i++) {
        console.log(4)
    }
    setTimeout(function() {console.log(5);}, 100);
    console.log('--------end---------');

   setTimeout(function() {console.log('我先定时的,我400ms');}, 400);
    var start = new Date();
    for (var i = 0; i < 5000; i++) {
        console.log('这里模拟了5000次循环的耗时操作');
    }
    var end = new Date();
    console.log('阻塞时长:' + Number(end - start) + '毫秒');
    setTimeout(function() {console.log('我后定时的,我300ms');}, 300);

    setTimeout(function() {console.log('我先定时的,我400ms');}, 400);
    var start = new Date();
    for (var i = 0; i < 500; i++) {
        console.log('这里模拟了500次循环的耗时操作');
    }
    var end = new Date();
    console.log('阻塞时长:' + Number(end - start) + '毫秒');
    setTimeout(function() {console.log('我后定时的,我300ms');}, 300);

额外补充:

虽然JS是单线程的但是浏览器的内核是多线程的,在浏览器的内核中不同的异步操作由不同的浏览器内核模块调度执行,异步操作会将相关回调添加到任务队列中。而不同的异步操作添加到任务队列的时机也不同,如 onclick, setTimeout, ajax 处理的方式都不同,这些异步操作是由浏览器内核的 webcore 来执行的,webcore 包含上图中的3种 webAPI,分别是 DOM Binding、network、timer模块

onclick 由浏览器内核的 DOM Binding 模块来处理,当事件触发的时候,回调函数会立即添加到任务队列中。

setTimeout 会由浏览器内核的 timer 模块来进行延时处理,当时间到达的时候,才会将回调函数添加到任务队列中。

ajax 则会由浏览器内核的 network 模块来处理,在网络请求完成返回之后,才将回调添加到任务队列中。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Javascript 分析Javascript事件机制和Settimeout讲解 的相关文章

随机推荐

  • Framebuffer 机制【转】

    本文转载自 xff1a http blog csdn net paul liao article details 7706477 Framebuffer Framebuffer是Linux系统为显示设备提供的一个接口 xff0c 它将显示缓
  • 单片机——蜂鸣器

    1 蜂鸣器 2 所用元件 2n5771 at89c51 button cap cap elec crystal res speaker 例图 xff1a 例图代码 xff1a include lt REGX51 H gt sbit BEEP
  • Linux获取机器码

    1 准备工作 安装php xff0c 并已经配置好环境变量path 2 运行hardware sh获取机器码 shell gt php span class token punctuation span span class token o
  • Windows远程桌面卡顿问题(包含网络调优)

    注 xff1a 以下操作需管理员权限执行CMD 关闭自动调节 xff1a netsh interface tcp span class token function set span global autotuninglevel 61 di
  • ESXI VIB升级报错

    一 兼容性问题 1 通过VIB升级ESXI时 xff0c 可能会出现类似报错 span class token namespace DependencyError span VIB LSI bootbank scsi mpt3sas 04
  • MySQL 8.0安装

    1 安装MySQL 8 0 Server shell gt dnf span class token operator span y install 64 mysql 2 开启服务 shell gt systemctl span class
  • 华为镜像启动报错

    shell gt span class token function rm span span class token operator span etc span class token operator span udev span c
  • ThinkPad T14s 安装Ubuntu22踩坑记

    讲一个我装机历经的一个小故事 首先 xff0c 花个万把块 xff0c 买个心仪的撸码神奇 xff0c 我买的是2022款ThinkPad T14s 官网关注了好久就是不出32G内存版本的 xff0c 无奈只能买一个16G内存版本的 xff
  • STM32F429入门(二十一):SPI协议及SPI读写FLASH

    IIC主要用于通讯速率一般的场合 xff0c 而SPI一般用于较高速的场合 一 SPI协议简介 SPI 协议是由摩托罗拉公司提出的通讯协议 Serial Peripheral Interface xff0c 即串行外围设 备接口 xff0c
  • Dell清除BIOS密码及硬盘锁

    1 获取System Number F2进入BIOS xff0c 点击Unlock出现以下界面 xff0c 记录System Number 2 获取password 访问https bios pw org xff0c 将记录的System
  • 论文阅读:Learning Deep Features for Discriminative Localization(CAM)

    Learning Deep Features for Discriminative Localization 文章目录 Learning Deep Features for Discriminative Localization摘要1 引言
  • 上下文切换

    上下文切换 xff08 有时也称做进程切换或任务切换 xff09 是指 CPU 从一个 进程或线程 切换到另一个进程或线程 进程 xff08 有时候也称做任务 xff09 是指一个 程序运行的 实例 在 Linux 系统中 xff0c 线程
  • CAS服务器搭建

    一 CAS是Central Authentication Service的缩写 xff0c 中央认证服务 xff0c 一种独立开放指令协议 CAS 是 Yale 大学发起的一个开源项目 xff0c 旨在为 Web 应用系统提供一种可靠的单点
  • 如何查linux服务器的带宽占用?哪些进程占用带宽?

    前言 操作系统 xff1a Linux 操作环境 xff1a Centos7 ubuntu linux查看服务器带宽具体方法 一 使用speedtest cli命令查看下载和上传最大流量值 因为命令是python的 xff0c 所以需要先下
  • ESP8266调试方法

    ESP8266在开发的过程中无法进行仿真 xff0c 所以 xff0c 为了排查问题 xff0c 我们只能用别的方法 xff0c 下面一起来看看常用的两种方法 xff1a 添加UART打印和Fatal 查证方法 添加UART打印 对于 ES
  • 二、操作系统进程管理(4)——处理机调度(2)进程调度的时机、切换与过程、方式、评价指标

    3 进程调度的时机 切换与过程 方式 xff08 1 xff09 进程调度 xff08 低级调度 xff09 的时机 xff1a 什么时候需要进程调度 xff1f 主动放弃 xff1a 进程正常终止 运行过程中发生异常而终止 主动阻塞 xf
  • eclipse保存失败/无法保存/字符编码问题/JAVA

    eclipse保存失败 无法保存 字符编码问题 JAVA 在eclipse中单击 保存 按钮时出现如下提示对话内容 xff08 框 xff09 未能完成保存 原因 xff1a 使用 GBK 字符编码时 xff0c 无法映射某些字符 更改编码
  • java运算符(a++和++a)

    提示 xff1a 文章主要说明a 43 43 和 43 43 a系列 xff0c 附带其余信息 a 43 43 和 43 43 a的不同 xff1a 不同点是a 43 43 是先赋值再 43 1 xff0c 而 43 43 a则是先 43
  • 计算统计笔记整理(持更)

    bootstrap方法 基本思想 xff1a 模拟 目的 xff1a 计算 xff08 任意估计的 xff09 标准误差 偏差和置信区间 分类 xff1a 1 参数化bootstrap 分布形式已知 xff0c 或可由样本估计出分布 xff
  • Javascript 分析Javascript事件机制和Settimeout讲解

    线程 JavaScript特点就是单线程 xff0c 理解是 xff0c 同一个时间只能做一件事 那么 xff0c 为什么JavaScript不能有多个线程呢 xff1f 现在我们假设 xff0c JavaScript同时有多个线程 xff