首页 > 其他分享 >JS 里如何实现异步?

JS 里如何实现异步?

时间:2023-05-26 14:44:31浏览次数:38  
标签:异步 code web worker JS 如何 线程 onmessage imgData

由于JS是单线程程操作,所以遇到了一些比较耗时的操作时,会影响到主线程的效率,比如在扫描二维码应用中,解析QR code的过程中会造成页面相机流的卡顿。所以将耗时的解析过程放到子线程中就不会影响到主线程。
使用web worker 可以实现这个功能。

1. 子线程

在子线程 web_worker.js中使用onmessage 来接收主进程post的参数。解析成功后再将结果post到主线程。

self.onmessage = function(message){
  const imgData = message.data;
  const code = jsQR(imgData.data, imgData.width, imgData.height);
  if (code) {
    self.postMessage(code);
  }
};

2. 主线程

主线程的文件中需要先引入 这个web_worker.js文件

worker = new Worker("your/path/to/web_worker.js");

a. 在需要解析的时候post 参数到子线程进行解析。

 worker.postMessage(imageData);

b. 同时使用onmessage 来接收子线程post的结果。

worker.onmessage = e => {
  console.log(e.data);
};

c. 不需要的时候要中止掉web worker.

worker.terminate();

worker.terminate() 是用在worker 的外部,就是可以在主线程中使用的。
worker.close 也可以终止worker, 但是要用在worker内部。

web worker 中不能使用dom, global 需要改写成self, 可以使用console.log来调试。

标签:异步,code,web,worker,JS,如何,线程,onmessage,imgData
From: https://www.cnblogs.com/Regina-wisdom/p/17434680.html

相关文章

  • 网站一般有哪些反爬机制,如何应对
    网站在设计时,为了保障服务器的稳定运行和防止数据被非法获取,通常会设置反爬机制。一般来说,网站的反爬机制主要包括以下几种:1、验证码:网站通过在用户访问时弹出验证码的方式,要求用户输入验证码才能进入网站或进行某些操作。2、IP封锁:网站会对频繁访问、异常访问或基于不同的模式访问......
  • js 睡眠函数
    functiondelay(ms){returnnewPromise((resolve,reject)=>setTimeout(resolve,ms))}letinit=async()=>{console.log(1)awaitdelay(2000)console.log(2)}init()作者:北京小伙_盼链接:https://juejin.cn/post/7138662664883929096来源:稀土掘金......
  • 如何防止缓存被击穿
    在什么情况下缓存会被击穿高并发应用场景中,当大量请求同时请求同个key,这个key便会失效了,这就使得数据库被超量的请求直接访问。此现象就是缓存击穿,其后果会导致数据库压力陡增。使用singleflight阻止同时请求请求1、2、3同时请求相同的key,singleflight机制只会让请求1访问DB,请......
  • vue Js对象结构函数使用方法
    写了三行不如一行搞定原先的constinComeTypeId=this.queryForm.inComeTypeIdconstcurrentPage=this.queryForm.currentPageconstpageSize=this.queryForm.pageSize现在的const{inComeTypeId,currentPage,pageSize}=this.queryForm一行代码实现变量......
  • 如何通过财务共享推进财务精细化管理
    虽然大多数公司都通过财务共享中心实现了集中账务处理,如费用管控、凭证审核、总账报表结算、资金自动支付等,运营效率不断提升,但是离真正做到财务精细化管理,为企业战略提供决策支撑、为业务拓展提供数据指引、为企业价值创造提供有力抓手,仍然存在一定的差距。基于用友参与建设运营的......
  • Lazada平台如何获取信息并调用呢?
    LazadaisoneofthelargestonlinemarketplacesinSoutheastAsia.Itoffersawidevarietyofproductsacrosscategoriessuchaselectronics,fashion,homeandliving,andhealthandbeauty.OneofthekeyreasonsforitssuccessisitsAPIsorApplicat......
  • 直播系统源代码,js控制滚动条位置
    直播系统源代码,js控制滚动条位置  privaterenderData=()=>{ /*图形渲染方法*/    this.renderCanvas();    /*定位滚动条,要在图形渲染之后定位*/    constdom=document.getElementById(this._para.container)    dom!.style.ove......
  • js百度地图计算两经纬度坐标点的距离
    百度地图提供现成的方法,直接调用就可以了Map类getDistance(start:Point,end:Point)Number返回两点之间的距离,单位是米。(自1.1新增)varmap=newBMap.Map("container");varpoint1=newBMap.Point(lng1,lat1);varpoint2=newBMap.Point(lng2,lat2);vardistanc......
  • 如何优化Python爬虫的速度?
    Python爬虫慢的原因有很多,网络延迟高、爬取数据量过大、爬虫程序设计问题、不合理的请求头设置、Python解释器性能问题等都是制约爬虫速度的重要因素。总之,在遇到Python爬虫慢的问题时,需要详细了解可能出现的原因,并根据具体情况进行相应的调整和改进,保证程序的稳定性和效率。......
  • 如何优化Python爬虫的速度?
    Python爬虫慢的原因有很多,网络延迟高、爬取数据量过大、爬虫程序设计问题、不合理的请求头设置、Python解释器性能问题等都是制约爬虫速度的重要因素。总之,在遇到Python爬虫慢的问题时,需要详细了解可能出现的原因,并根据具体情况进行相应的调整和改进,保证程序的稳定性和效率。以......