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,一经查实,立即删除!

相关文章

Android WebView Long Press长按保存图片到手机

<span style"font-size:18px;">首先要先注册长按监听菜单private String imgurl "";/**** 功能&#xff1a;长按图片保存到手机*/Overridepublic void onCreateContextMenu(ContextMenu menu, View v, ContextMenuInfo menuInfo) {super.onCreateCo…

specification java_使用JPA实现Specification规范模式 -解道Jdon

使用JPA实现Specification规范规格模式由DDD之父 Eric Evans 和OO之父 Martin Fowler定义的规范(Specification也称规格模式)模式article 越来越受到广泛应用&#xff0c;本文介绍如何使用JavaEE 持久层规范JPA实现规格模式&#xff0c;其实现思想也适合其他持久层框架。案例源…

sublime用cmd窗口调试python_如何使用xdebug和sublime调试python脚本

然后我去了XDebug.崇高-设置&#xff0c;但我不确定如何配置它(我链接到什么&#xff0c;它需要什么网址&#xff0c;等等…){// For remote debugging to resolve the file locations// it is required to configure the path mapping// with the server path as key and loca…

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;并没有使用传…

python unicode error_关于GAE中运行python出现unicode decode error

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼老问题了&#xff0c;但因为本人不会python语法但却要用&#xff0c;找了很久解决办法&#xff0c;比如添加一行# -*- coding: utf-8 -*-但还是不行。。主要errorUnicodeDecodeError: *ascii* codec can*t decode byte 0xb0 in pos…

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

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

java rpg项目代码_java rpg游戏代码(移动保存读取)

package ggg;import java.awt.*;import java.awt.event.*;import javax.swing.*;import java.util.*;import java.io.*;public class Tank1 extends JFrame{//用来存储对应的图片的二维数组 (这里的icon数组&#xff0c;只是用来将我们设置好的数组在界面上显示出来&#xff0…

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

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

Java学习二:Javac Java的学习(原创)

安装完了JDK&#xff0c;就可以编译、执行简答的Java程序了&#xff0c; 一、Javac ,Java 路径名和包名的关系&#xff1a; 在D盘下&#xff0c;建文件夹Test&#xff0c;在Test里创建文件Java1.java(类名要与文件名一致&#xff09; Java1.java : package Test; public c…

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 命令执…

PrintArea打印,@media screen解决移动web开发的多分辨率问题,@media print设置打印的样式...

PrintArea打印&#xff0c;局部DIV打印插件&#xff0c;依赖JQuery。 github:https://github.com/RitsC/PrintArea 当打印时需要临时改变页面布局&#xff0c;可以使用 media print{ /* * CSS */ } 打印时生效&#xff0c;打印完自动失效。 需要屏幕自适应&#xff0c;或多种分…

java arraycopyof_Java中System.arraycopy()和Arrays.copyOf()的区别

System.arraycopy()这是一个由java标准库提供的方法。用它进行复制数组比用for循环要快的多。arraycopy()需要的参数有&#xff1a;源数组&#xff0c;从源数组中的什么位置开始复制的偏移量&#xff0c;目标数组&#xff0c;从目标数组中的什么位置开始复制的偏移量&#xff0…

python 异步 生产者 消费者_python 线程通信 生产者与消费者

1 """2 线程通信的生产者与消费者3 python的queue模块中提供了同步的线程安全的队列类,都具有原子性&#xff0c;实现线程间的同步4 Queue (FIFO&#xff1a; fist in fist out)5 LifoQueue (LIFO&#xff1a; last in fist out)6 PriorityQueue (优先级队列)78…

3、C#面向对象:封装、继承、多态、String、集合、文件(下)

面向对象多态 一、装箱和拆箱 装箱&#xff1a;将值类型转换为引用类型。object o 1&#xff1b;值类型给引用类型赋值 拆箱&#xff1a;将引用类型转换为值类型。int n (int)o; 强制转换为值类型 满足条件&#xff1a;两种类型是否存在继承关系。 int n Convert.ToInt32(&q…

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的应用程序等内容…

python后端框架flask_Vue+Flask轻量级前端、后端框架,如何完美同步开发

导言我们的Vue2.0应用&#xff1a;简读-微信公众号RSS&#xff0c;即将进入后端开发。VueFlask作为轻量级前端、后端框架&#xff0c;非常适合组合起来快速开发。一个是js&#xff0c;一个是Python。Bonus:可以完美实现跨域调试&#xff0c;不需要JSONP&#xff0c;也不需要服务…