js 多个定时器_JS中的同步/异步编程

ef8c1f6f034ae8718fda733cc3084163.png

1. 进程(process)/线程(thread)

进程process: 电脑端安装很多的应用软件,每当运行一个应用程序,相当于开辟一个进程(而对于浏览器来说,每新建一个页卡访问一个页面,都是新开辟一个进程)

  • 任务管理器可以查看进程

线程thread: 每一个进程中可能还会同时做很多事情,如果程序中需要同时处理很多事情,则需要开辟多个线程(一个线程同时只能做一个事情)

=> 一个进程中,会包含0~多个线程

理解:

  • 每一个饭店是一个进程
  • 饭店里面每一个点餐的服务员就是一个线程

2. JS是单线程的线程

浏览器是‘多线程’的,但是JS渲染或者页面渲染是‘单线程’的

2.1 浏览器中线程的分类

  • GUI渲染线程(渲染和绘制页面)
  • JS引擎线程(运行和渲染JS代码)
  • 事件管控和触发线程
  • 定时器管控和触发线程
  • 异步HTTP请求线程
  • ...

2.2 JS代码的渲染是单线程的

浏览器是多线程的(打开一个页面以后,浏览器至少要分配好几个线程同时去处理事情),但是浏览器只会分配出一个线程去渲染代码(GUI渲染线程),所以说JS是单线程的:‘在JS代码执行过程中,一次只能处理一个事情’

3. 同步与异步

  • 同步编程【单线程】:任务是一次执行,上面的任务没有执行完成,下面的任务是不能去操作的
  • 异步编程【多线程】:同时可以处理很多事情,但是JS中的异步编程是利用浏览器的相关机制构造出来的异步效果

通俗的理解:比如我们在食堂打饭这个场景: 我们在排队打饭,但是当排到B打饭的时候,他的王者荣耀游戏还没有打完(吃饭不积极,思想... )

  • 此时同步编程思想处理的方式就是:我们大家都等B打完游戏,只要B不打饭,后面的也不能打饭(B不会就是食堂老板的儿子吧,这么多人等他打游戏 )
  • 但是异步编程思想处理方式是这样的:不管你的后台有多大,腾不出手,就去旁边的任务队列等着去,等我们大家都打完饭,你的游戏也打完了,再来打饭(这你还怎么猖狂 )

7b22c4bc1b17e240dbe987c0a8407019.png

dffef5812b38b9b60a72ccc977bd0c06.png

3.1 常见的异步代码

  • 定时器:设置定时器是同步(立即设置),异步指的是间隔多久后执行指定的函数
  • 事件绑定(监听)
  • AJAX的异步请求
  • promise/async/await

4 定时器

  • setTimeout
  • setInterval

4.1 定时器的返回值

返回值:是一个数字,代表当前是第几个定时器

  • 我们后期可以基于clearTimeout / clearInterval 清除定时器
  • 手动把timer赋值为null,后期基于它的值验证是否存在定时器

4.2 浏览器的最小反应时间

  • 定时器是异步的:遇到定时器先不执行,先去执行其他事情,等到所有事情做完再看那个定时器到达时间然后可以立马执行;
  • 定时器的等待时间即使设置为零,也不是立即执行,浏览器有一个最小的等待时间(谷歌5~6MS IE浏览器10~13MS
  • 最小反应时间:在滚动相同的距离下,事件被触发多少次,取决于滚动所用的时间(速度)来决定的,浏览器有最小的反应时间,假设是5MS,整体运动时间100MS,这段时间内,浏览器能够识别出来的次数是100/5 = 20次。同理,如果我们运动1000MS,那么识别触发的次数就是1000/5=200次

4.3 从定时器的执行过程理解它的异步的

  • 把代码拿到栈中执行,当遇到异步代码定时器的时候,会立即把定时器拿到任务队列中去等待一定时间
  • 当把主线程的所有代码执行完毕之后,去任务队列中查看哪个定时器到达时间,把到达时间的定时器拿到栈中执行(这种操作是异步)

=> 遇到定时器不是不处理,而是把它放在任务队列,等到主线程空闲下来,再去任务队列查看,这种操作是异步。中途定时器到达时间了,但是主线程并没有到达时间,此时也不会立即执行定时器,必须等到主线程空闲下来。

4.4 下面是关于定时器的对异步代码的理解,配有图片和注释的说明

4.4.1 题目一

let n = 0;
setTimeout(() => {n++;console.log(n);   //=> 3 (2)
}, 1000);  //一秒钟之后执行
n += 2;
console.log(n);    //=> 2 (1)

f68f1386c2cb795e29d42fe177d284c4.png

4.4.2 题目二

let n = 0;
setTimeout(() => {n++;console.log(n);   //=> 3 (2)
},0);  //写零也不是立即执行,而是有一个最小的等待时间:10ms左右
n += 2;
console.log(n);   //=> 2 (1)

4.4.3 题目三

let n = 10;
setTimeout(() => {n++;console.log(n);    //=>11(3)
}, 0);        
console.log(n);  //=>10(1)
for(let i = 0;i < 99999999; i++){}
console.log(n);  //=>10(2)

18331ae153b310e95a5e5ec9ca7e2dd7.png

4.4.4 题目四

time / timeEnd:获取他们中间代码执行所需要的时间(这个时间需要受到电脑配置、和当前电脑运行的环境等多方面因素影响),时间只作为参考

setTimeout(() => {console.log(1);
}, 20);
console.log(2);
setTimeout(() => {console.log(3);
}, 10);
console.log(4);
console.time('AA');
for (let i = 0; i < 90000000; i++) {// do soming
}
console.timeEnd('AA'); //=>AA: 79ms 左右
console.log(5);
setTimeout(() => {console.log(6);
}, 8);
console.log(7);
setTimeout(() => {console.log(8);
}, 15);
console.log(9);

9cbf313b62f5df574646ceebfb800163.png

4.4.5 题目五

console.log(1); //=>1(1)
setTimeout(function () {console.log(2);
}, 20);
console.log(3); //=>3(2)
for (let i = 0; i > -1; i++) {} //=>死循环,GUI线程啥都做不了,一直在这加载(其它什么事情都干不了)
console.log(4);
setTimeout(function () {console.log(5);
}, 10);
console.log(6);

5. 事件循环 Event Loop

定义:JS是单线程的,因为浏览器只分配一个线程自上而下加载代码。所以JS中大部分任务都是同步任务。但是一定也有异步任务,定时器、事件绑定等这些都属于异步任务。

而浏览器处理JS中的异步任务是:在JS代码自上而下执行的时候,代码进栈执行,执行完出栈,在这反反复复进行的过程中。当遇到定时器等异步任务的时候,会把当前任务放在等待任务队列(Event Queue)中存起来,并且存起来之后不会影响下面代码的执行,主线程会继续执行。当 把下面的同步任务执行完成之后,主线程空闲下来了会去等待队列找哪一个任务到达指定的时间点,就拿到主线程中去执行。执行完之后再去等待队列中查看...

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/431537.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Tomcat免安装版的环境变量配置以及Eclipse下的Tomcat配置和测试

Tomcat是目前比较流行的开源且免费的Web应用服务器&#xff0c;在我的电脑上第一次安装Tomcat&#xff0c;再经过网上教程和自己的摸索后&#xff0c;将这个过程 重新记录下来&#xff0c;以便以后如果忘记了可以随时查看。 注意&#xff1a;首先要明确一点&#xff0c;Tomcat与…

java开发和structs的关系_java---springMVC与strutsMVC的区别

项目刚刚换了web层框架&#xff0c;放弃了struts2改用spring3mvc当初还框架的时候目的比较单纯---springmvc支持rest&#xff0c;小生对restful url由衷的喜欢不用不知道 一用就发现开发效率确实比struts2高我们用struts2时采用的传统的配置文件的方式&#xff0c;并没有使用传…

【推荐】介绍两款Windows资源管理器,Q-Dir 与 FreeCommander XE(比TotalCommander更易用的免费资源管理器)...

你是否也像我一样&#xff0c;随着硬盘、文件数量的增加&#xff0c;而感到对于文件的管理越来越乏力。 于是我试用了传说中的各种软件&#xff0c;包括各种Explorer外壳&#xff0c;或者第三方资源管理器。 最后我确定下来经常使用&#xff0c;并推荐给您的是这两款软件&#…

java类加载器_java底层内功 第一章,类加载器的任性

java类是怎么加载的&#xff1f;类加载机制JVM主要包含三大核心部分&#xff1a;类加载器&#xff0c;运行时数据区和执行引擎。虚拟机将描述类的数据从class文件加载到内存&#xff0c;并对数据进行校验&#xff0c;准备&#xff0c;解析和初始化&#xff0c;最终就会形成可以…

java的requestmapping_SpringMVC RequestMapping 详解

SpringMVC RequestMapping 详解RequestMapping这个注解在SpringMVC扮演着非常重要的角色&#xff0c;可以说是随处可见。它的知识点很简单。今天我们就一起学习SpringMVC的RequestMapping这个注解。文章主要分为两个部分&#xff1a;RequestMapping 基础用法和RequestMapping 提…

redis查询所有key命令_想在生产搞事情?那试试这些 Redis 命令

作者&#xff1a;鸭血粉丝出自&#xff1a;Java极客技术原文&#xff1a;mp.weixin.qq.com/s/WeAamgYYGQfxlsppsn9_lg哎&#xff0c;最近阿粉又双叒叕犯事了。事情是这样的&#xff0c;前一段时间阿粉公司生产交易偶发报错&#xff0c;一番排查下来最终原因是因为 Redis 命令执…

mysql gui 分区_一文彻底搞懂MySQL分区

一.InnoDB逻辑存储结构首先要先介绍一下InnoDB逻辑存储结构和区的概念&#xff0c;它的所有数据都被逻辑地存放在表空间&#xff0c;表空间又由段&#xff0c;区&#xff0c;页组成。段段就是上图的segment区域&#xff0c;常见的段有数据段、索引段、回滚段等&#xff0c;在In…

js 获取域名_RapidDNS域名查询如何联动Goby

前言&#xff1a;http://RapidDNS.io 是一个秒级在线子域名和同IP域名的查询工具。目前拥有25亿条DNS记录&#xff0c;支持A、AAAA、CNAME、MX4种DNS记录类型。由于Goby程序对子域名收集方面不是很完善&#xff0c;这里特编写此插件作为其拓展。可以方便快速获取域名和ip地址信…

iOS 9应用开发教程之iOS 9新特性

iOS 9应用开发教程之iOS 9新特性 iOS 9开发概述 iOS 9是目前苹果公司用于苹果手机和苹果平板电脑的最新的操作系统。该操作系统于2015年6月8号&#xff08;美国时间&#xff09;被发布。本章将主要讲解iOS 9的新特性、以及使用Xcode 7.0如何编写一个简单的iOS 9的应用程序等内容…

kafka创建topic命令_0748-5.14.4-Kafka的扩容和缩容

​文档编写目的在Kafka集群资源使用已超出系统配置的资源时&#xff0c;或者有大量资源闲置造成资源浪费的时候&#xff0c;需要分别通过扩容Kafka和缩容Kafka来进行调整。本篇文章Fayson主要介绍如何进行Kafka的扩容和缩容&#xff0c;以及变更后的Kafka集群如何进行负载均衡的…

java 对话框 显示图片_Java对话框上显示图片

手掌心其实有很多种方法可以解决图片显示大小的问题:使用photoshop修改. 优点是可以节省系统资源, 显示图片的时候,不用做处理,缺点是需要了解ps的基本操作使用JDialog 自定义对话框. 优点 可以实现复杂的效果, 缺点,代码量比较多使用ImageIcon, Image 类 实现图片的缩放,. 优点…

class-dump获取iOS私有api

转自&#xff1a;http://blog.csdn.net/sunyuanyang625/article/details/41440167 获取各类iOS私有api 安装工具class&#xff0d;dump 资源地址http://download.csdn.net/detail/map625/8191343 运行class&#xff0d;dump并编译src项目 编译之后在produce中找到编译好的class…

火星云分发全网视频_好用的短视频一键分发软件,让工作效率提高10倍

随着近几年新媒体行业的高速发展&#xff0c;新媒体行业的红利也越来越来&#xff0c;也有越来越多的人想要享受到这波红利&#xff0c;于是不管是个人是企业都纷纷开始进入这个市场。不过也随之诞生了一系列麻烦繁琐的问题&#xff0c;如怎么持续创作内容&#xff0c;怎么花费…

java 采样_Java编程实现beta分布的采样或抽样实例代码

本文研究的主要是Java编程实现beta分布的采样或抽样&#xff0c;具体如下。本文将使用math3提供的工具包&#xff0c;对beta分布进行采样。如下程序是对alpha81&#xff0c;beta219的beta分布函数&#xff0c;进行抽样&#xff0c;共采样10000次。package function;/*** author…

树莓派 蓝牙音响_你应该拥有一个树莓派

为什么你应该拥有一个树莓派树莓派并不是极客的玩具树莓派可以用来做什么?它能实现的实在是太多了,最常见的比如自动化脚本 各种机器人bot: QQ/wechat/微博/facebook/telegram,IM结合爬虫 telegram的bot如今被黑产们结合比特币,做成了交易系统 使用宝塔linux面板,一键安装word…

训练集的识别率一直波动_机器学习验证集为什么不再有新意?

机器学习中&#xff0c;一般将样本数据分成独立的三部分&#xff1a;训练集、验证集和测试集。其中验证集在机器学习中所起到的作用是&#xff1a;开发模型总需要调节模型的参数&#xff0c;而整个调节过程需要在验证集数据上运行训练的模型&#xff0c;从而给出其表现的反馈信…

java写一个web聊天工具_javaweb写的在线聊天应用

写这个玩意儿就是想练练手&#xff0c; 用户需要登陆才能在线聊天&#xff0c;不要依赖数据库&#xff0c; 不需要数据库的操作&#xff0c; 所有的数据都是保存在内存中&#xff0c; 如果服务器一旦重启&#xff0c;数据就没有了&#xff1b;登录界面&#xff1a;聊天界面&…

人物角色群体攻击判定(一)

我们制作3D动作游戏的时候,常常主人公是一对多人进行攻击,或者敌人在角色前方一定范围内进行攻击. 我们怎么实现这种效果呢&#xff1f; 1. 使用触发器(多体攻击)方便调试,可视化(推荐)2. 运用点乘和叉乘,判断敌人的角度和位置(单,多)一般3. 使用Physics的Physics.OverlapSpher…

mfc cimage加载显示图片_在微信小程序里实现图片预加载组件

网页中的图片预加载我们知道在 Web 页面中实现图片的预加载其实很简单&#xff0c;通常的做法是在 JS 中使用 Image 对象即可&#xff0c;代码大致如下var image new Image() image.onload function() {console.log(图片加载完成) } image.src"//misc.360buyimg.com/lib…

HDU 2242 双连通分量 考研路茫茫——空调教室

思路就是求边双连通分量&#xff0c;然后缩点&#xff0c;再用树形DP搞一下。 代码和求强连通很类似&#xff0c;有点神奇&#xff0c;_&#xff0c;慢慢消化吧 1 #include <cstdio>2 #include <cstring>3 #include <algorithm>4 #include <vector>5 #…