需求:有一个长时间的斐波拉契的计算希望放在分线程中计算,计算的得到结果后再返回给主线程展示,再计算的时候不冻结页面

var number = 55;//传入分线程的参数

var worker = new Worker('worker.js');//利用一个js文件创建一个分线程

worker.postMessage(number);//向分线程传入数据

woker.onmessage=function(event){//设置分线程的回调函数,并接收返回的结果

  console.log('接收到分线线程返回的数据:'+event.data);

}

下面是worker.js文件中的代码:

var onmessage = function(event){//接收主线程传入的数据并进行计算

  var number = event.data;

  var result = fibonacci(number);

  postMessage(result );//返回主线程并传入返回结果

}

function fibonacci(n){//斐波拉契计算函数

  return n<=2?1:fibonacci(n-1)+fibonacci(n-2);

}

注:当worker.js文件作为分线程调用的时候,worker.js文件中的this就不是指向window了,所有再分线程上面是不能使用window自带的很多函数的(比如alert),并且再分线程里面也就访问不到页面的任何元素。所以分线程的定位是只进行计算的,不做任何页面相关的操作。

JS利用HTML5的Web Worker实现多线程的更多相关文章

  1. Web Worker javascript多线程编程(二)

    Web Worker javascript多线程编程(一)中提到有两种Web Worker:专用线程dedicated web worker,以及共享线程shared web worker.不过主要讲 ...

  2. Web Worker javascript多线程编程(一)

    什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...

  3. 【转】Web Worker javascript多线程编程(一)

    原文:https://www.cnblogs.com/peakleo/p/6218823.html -------------------------------------------------- ...

  4. 通过一次实验来了解HTML5的 Web Worker

    web worker 是运行在后台的 JavaScript,不会影响页面的性能. 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 Ja ...

  5. 深入理解javascript异步编程障眼法&&h5 web worker实现多线程

    0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 1 2 3 4 ...

  6. html5之web worker

    Web Worker   在本文中 与 Web Worker 进行双向通信 WindowTimers 在 IE10 Platform Preview 4 中对 Web Worker 的更新 API 参 ...

  7. JS多线程之Web Worker

    什么是Web Worker web worker 是运行在后台的 JavaScript,不会影响页面的性能. 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web wor ...

  8. 深入HTML5 Web Worker应用实践:多线程编程

    HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越多崭新的特性和功能.它不但强化了 Web 系统或网页的表现性能 ...

  9. 深入 HTML5 Web Worker 应用实践:多线程编程

    深入 HTML5 Web Worker 应用实践:多线程编程 HTML5 中工作线程(Web Worker)简介 至 2008 年 W3C 制定出第一个 HTML5 草案开始,HTML5 承载了越来越 ...

随机推荐

  1. FastDFS :java.lang.Exception: getStoreStorage fail, errno code: 28

    FastDFS 服务正常,突然报错:java.lang.Exception: getStoreStorage fail, errno code: 28 答:错误代码28表示 No space left ...

  2. Docker - ubuntu 镜像安装网络工具

    概述 给 ubuntu 镜像, 安装一些基本的网络工具 背景 尝试学习的时候, 需要检测网络的连通性 没有这些工具, 绕了不少弯路 工具们 ping ip a 环境 docker 18.09 ubun ...

  3. 【C 语言】一元二次方程

    求一元二次方程:ax2+bx+c=0 的根. 输入三个实数a,b,c的值,且a不等于0. 数学基础:一元二次方程 只含有一个未知数(一元),并且未知数项的最高次数是2(二次)的整式方程叫做一元二次方程 ...

  4. [HDU5382]GCD?LCM!

    Description HDU5382 会吗?不会! 设\(F(n)=\sum\limits_{i = 1}^{n}\sum\limits_{j=1}^{n}[lcm(i,j)+gcd(i,j)\ge ...

  5. Codeforces Round #567 (Div. 2) A.Chunga-Changa

    原文链接:传送 #include"algorithm" #include"iostream" #include"cmath" using n ...

  6. LNMP调优

    1.编译安装nginx前修改: 在安装包目录下  vim src/core/nginx.h //#号不代表注释 #define nginx_version      1009009 //软件版本号 # ...

  7. OO博客作业-《JML之卷》

    OO第三单元小结 一.JML语言理论基础以及应用工具链情况梳理 一句话来说,JML就是用于对JAVA程序设计逻辑的预先约定的一种语言,以便正确严格高效地完成程序以及展开测试,这在不能容忍细微错误的工程 ...

  8. SpringMVC:ssm整合练习一

    西部开源-秦疆老师:MyBatis,Spring,SpringMVC 整合练习一 , 秦老师交流Q群号: 664386224 未授权禁止转载!编辑不易 , 转发请注明出处!防君子不防小人,共勉! ss ...

  9. ACM的探索之Just Skip The Problem

    -----------------心怀虔诚,奋勇前进,fighting!!!!!! Problem Description: inclusively:          包括一切地;包含地 simul ...

  10. 用Fiddler实现手机抓包

    手机用fiddler抓包 电脑最好是笔记本,这样能和手机保持统一局域网内:其他不多说,直接说步骤了. 一.对PC(笔记本)参数进行配置    1. 配置fiddler允许监听到https(fiddle ...