javascript-js实现多线程

article/2025/10/9 9:51:45

在讲之前,大家都知道js是基于单线程的,而这个线程就是浏览器的js引擎。
首先来看一下大家用的浏览器都具有那些线程吧。

假如我们要执行一些耗时的操作,比如加载一张很大的图片,我们可能需要一个进度条来让用户进行等待,在等待的过程中,整个js线程会被阻塞,后面的代码不能正常运行,这可能大大的降低用户体验,这时候我们就期望拥有一个工作线程来处理这些耗时的操作。在传统的html时代是基本不可能实现的,而现在,我们拥有一种叫做worker的东西。它是js里的一个类,而我们只需要创建它的实例就可以使用它。

var worker = new Worker(js file path);

构造函数的参数填上你的js文件的路径,这个js文件将会在浏览器新开的线程里运行,而与原先的js引擎的线程并不影响。
下面看个例子。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><input type="text" name="ipt" id="ipt" value="" /><button id="start">start</button><button id="stop">stop</button><button id="ale">alert</button><script type="text/javascript">var ipt = document.getElementById("ipt");var stop = document.getElementById("stop");var start = document.getElementById("start");var ale = document.getElementById("ale");var worker = new Worker("js/test22.js");worker.onmessage = function(){ipt.value = event.data;};stop.addEventListener("click",function(){//用于关闭worker线程worker.terminate();});start.addEventListener("click",function(){//开起worker线程worker = new Worker("js/test22.js");});ale.addEventListener("click",function(){alert("i'm a dialog");});</script></body>
</html>

下面是test22.js里的代码,也就是存在于worker线程里的代码

var i = 0;
function mainFunc(){i++;//把i发送到浏览器的js引擎线程里postMessage(i);
}
var id = setInterval(mainFunc,1000);

运行起来我们会发现

点击确定后,它的数值并非2,而是一个比2更大的数

虽然dialog的弹出会阻塞js引擎线程,但是并不影响worker线程的运行,所以,在我们点击确定后,只是在js引擎线程上更新了新的内容,而数值是一直在跑动的,这就说明worker线程和原本的js线程互不影响.

那么既然互不影响,两个线程之间要怎么来联系呢,答案其实已经在代码里了,那就是onPostMessage 和 onmessage这两个函数,其中onPostMessage(data)的参数是你要传递的数据,而onmessage是一个回调函数,只有在接受到数据时,onmessage会被回调,onmessage有一个隐藏的参数,那就是event,我们可以用event.data获取到传递过来的数据来更新主线程。

使用worker线程应注意的是,所有js里集成的对象都在js线程里,而并非worker线程。
例如我们在worker线程里写上:

var a = document.getElementById("a");

结果你会得到一条Error,告诉你找不到document,或者document is undefined。所以我们尽量把需要的东西都写到主线程里,而只把耗时的操作写到worker线程里。


http://chatgpt.dhexx.cn/article/XHiqh36I.shtml

相关文章

html5多线程例子,javascript的单线程事件循环及多线程介绍

前言 其实我前面文章对于改变js的执行顺序及多线程都有相关介绍&#xff01;例如&#xff0c;我们可以用setTimeout(fn,0)改变代码执行循序&#xff0c;文章最后也提及了Event Loop(事件循环)。同时&#xff0c;js的Worker可以模拟实现多线程&#xff0c;我前面文章也有类似的应…

js 实现多线程

2019独角兽企业重金招聘Python工程师标准>>> 一、多线程理解 首先,我们要理解什么是多线程,百度百科上说:多线程(英语:multithreading),是指从软件或者硬件上实现多个线程并发执行的技术。具有多线程能力的计算机因有硬件支持而能够在同一时间执行多于一个线…

javascript多线程

一、什么是多线程 二、Concurrent.Thread.js <meta charset"utf-8" /> <script src"Concurrent.Thread.js"></script> <script src"https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><style&…

js 多线程Worker

任务执行优先级&#xff0c;微任务&#xff08;Promise&#xff09;>宏任务&#xff08;定时器&#xff09;>线程任务&#xff08;Worker&#xff09; 多线程处理多个任务&#xff0c;这里假设5个任务循环了80亿&#xff0c;如果按之前js单线程执行是不是5*80亿&#xf…

Javascript的单线程与多线程

目录 一、浏览器的线程和进程 1.浏览器的线程 2.浏览器是多进程的 二、Javascript是单线程的 1.异步Ajax也是单线程的 2.setInterval和setTimeout本质上并不是多线程 三、Web Worker支持多线程 1.多线程间数据交互 2.Web Worker的兼容性 3.Web Worker的使用限制 3.1同…

JavaScript多线程编程

浏览器端JavaScript是以单线程的方式执行的&#xff0c;也就是说JavaScript和UI渲染占用同一个主线程&#xff0c;那就意味着&#xff0c;如果JavaScript进行高负载的数据处理&#xff0c;UI渲染就很有可能被阻断&#xff0c;浏览器就会出现卡顿&#xff0c;降低了用户体验。 …

JavaScript多线程初步学习

一、多线程理解 首先&#xff0c;我们要理解什么是多线程&#xff0c;百度百科上说&#xff1a;多线程&#xff08;英语&#xff1a;multithreading&#xff09;&#xff0c;是指从软件或者硬件上实现多个线程并发执行的技术。具有多线程能力的计算机因有硬件支持而能够在同一时…

JavaScript如何实现多线程?

今天看到一道面试题&#xff0c;问js如何实现多线程?下面来总结一下&#xff1a; 因为 JS是一种单线程语言&#xff0c;即使是一些异步的事件也是在JS的主线程上运行的。像setTimeout、ajax的异步请求&#xff0c;或者是dom元素的一些事件&#xff0c;都是在JS主线程执行的&a…

JS多线程

JS是多线程的吗&#xff1f; 多线程编程相信大家都很熟悉&#xff0c;比如在界面开发中&#xff0c;如果一个事件的响应需要较长时间&#xff0c;那么一般做法就是把事件处理程序写在另外一个线程中&#xff0c;在处理过程中&#xff0c;在界面上面显示类似进度条的元素。这样…

at24c16如何划分出多个读写区_mega32数组、内存以及AT24C16读写相关

主控&#xff1a;mega32 编译器&#xff1a;iar2.31E 这两天折腾一个模块程序&#xff0c;一个温度补偿参数&#xff0c;本来是72个字节&#xff0c;现在扩展了三倍&#xff0c;变成288个&#xff0c;然后各种问题出现了。 第一次修改时想当然&#xff0c;直接把两个用到的全局…

STC8H开发(十二): I2C驱动AT24C08,AT24C32系列EEPROM存储

目录 STC8H开发(一): 在Keil5中配置和使用FwLib_STC8封装库(图文详解)STC8H开发(二): 在Linux VSCode中配置和使用FwLib_STC8封装库(图文详解)STC8H开发(三): 基于FwLib_STC8的模数转换ADC介绍和演示用例说明STC8H开发(四): FwLib_STC8 封装库的介绍和使用注意事项STC8H开发(五…

STM32的硬件I2C与AT24C16

刚学STM32的时候就听闻STM32的硬件I2C存在重大bug&#xff0c;会导致运行卡死在等待ACK的过程中&#xff0c;所以一直以来对其避而远之&#xff0c;转而以模拟I2C取代之。最近这段时间一直在用STM32 CubeMX&#xff0c;图形化设置界面屡试不爽&#xff0c;连USB这种复杂外设都能…

STM32F030 硬件I2C驱动 AT24C16

网络上很多F1系列的ATC24的读写程序&#xff0c;但F0几乎没有。由于F0完全重写了I2C&#xff0c;所以以往的代码并不能直接使用&#xff0c;修改事件、接口上会浪费很多时间&#xff0c;特别是对于使用F0系列进行入门的新手。 在此十分感谢 畅学电子网 的对于AT24C16的资料&am…

EEPROM 之 AT24C16 - 备忘录

因为论坛里看到STM的I2C有点小bug&#xff0c;所以这里采用的是模拟I2C时序 【注】m0.6us表示的是这一段时间最小不能小于为0.6us&#xff0c;M0.6us表示的是这一段时间最大为0.6us 对AT24C16的操作有读和写&#xff0c;读又分为CURRENT ADDRESS READ、RANDOM READ、SEQUENTIAL…

S32K144:12.LPI2C驱动AT24C16

1.打开官方例程 2.修改引脚配置 3.时钟可按照实际情况修改&#xff0c;也可不用更改&#xff0c;本例时钟不做更改 4.配置LPI2C模块 设置从机地址&#xff1a;从机地址如下图所示&#xff0c;低三位表示为AT24C16的块地址&#xff0c;AT24C16将2KB的内存空间分为8个块&…

stm32cubemx I2C读取AT24C16

本文对如何使用stm32cube生成I2C工程不作说明&#xff0c;仅对在对AT24Cxx系列的使用时作出易忽略的说明&#xff1b; 1、at24cxx页面结构&#xff1a; 从该图可以看出16K&#xff08;bit&#xff09;共有128个页&#xff0c;每页由16byte构成。16k 128 * 16 * 8; 特别注意&…

STM32之 AT24C16(EEPROM)驱动代码(程序稳定,清晰明了)

AT24C16电路图 第一部分&#xff1a;IIC协议代码头文件(iic.h) #ifndef IIC_H #define IIC_H #include "stm32f10x.h" #include "sys.h" #include "delay.h"#define write 0 #define read 1//IIC总线地址接口定义 #define IIC_SCL PBout(7) #d…

GD32F4xx MCU控制I2C EEPROM(AT24C16)记录

1、AT24C16简介 1.1 主要参数 工作电压:1.8v ~ 5.5v存储空间:2048 Bytes ,分128页,16Bytes/页, 地址范围 0~2047。接口: I2C 总线I2C时钟频率: 1MHz( 5v ) , 400KHz( 1.8v, 2.5v, 2.7v)。1.2 电路连接 1.3 其他说明 AT24C16未使用器件地址引脚,总线上最多只可以连接一…

AT24C04、AT24C08、AT24C16系列EEPROM芯片单片机读写驱动程序

一、概述 在之前的一篇博文中&#xff0c;记录了AT24C01、AT24C02芯片的读写驱动&#xff0c;先将之前的相关文章include一下&#xff1a; 1.IIC驱动&#xff1a;4位数码管显示模块TM1637芯片C语言驱动程序 2.AT24C01/AT24C02读写&#xff1a;AT24C01/AT24C02系列EEPROM芯片单…

IIC方式读驱动AT24C16芯片

闲来无事&#xff0c;找了块msp430的板子编写了个IIC驱动AT24C16的程序。 IIC作是一种简单&#xff0c;双向&#xff0c;同步的二进制总线&#xff0c;由SDA数据线和SCL时钟线组成&#xff0c;所有接到IIC总线上的各设备的SDA数据线都连接到总线的SDA数据线上&#xff0c;用来…