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

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. 怎么把VS里的scanf_s换成scanf

    转自:https://blog.csdn.net/hansionz/article/details/79889039 方法一:在项目属性中---->配置属性------>C\C++---- ...

  2. Jarvis OJ - Baby's Crack - Writeup

    Jarvis OJ - Baby's Crack - Writeup M4x原创,欢迎转载,转载请表明出处 这是我第一次用爆破的方法做reverse,值得记录一下 题目: 文件下载 分析: 下载后解压 ...

  3. 使用SqlDataReader的查询操作

    原创weixin_42430576 发布于2019-01-31 18:49:41 阅读数 762  收藏 展开 using System; using System.Collections.Gener ...

  4. LeetCodr 43 字符串相乘

    思路 用一个数组记录乘积的结果,最后处理进位. 代码 class Solution { public: string multiply(string num1, string num2) { if(n ...

  5. Ubuntu16.04 anaconda3 opencv3.1.0 安装CPU版本caffe

    安装anaconda3 安装opencv3.1.0 安装依赖库 修改Makefile.config 修改Makefile 编译报错,卸载anaconda中的protobuffer: conda uni ...

  6. C#委托和事件的区别

    “委托是具有相同签名的函数(方法)的类型,事件是委托的应用方式之一” ---来自评论区老司机 delegate 是为了在C#中把函数作为对象传来传去而实现的一个“函数包装”.由于在C#中函数是二等公民 ...

  7. 题解 SP19148【INS14G - Kill them All】

    SP19148[INS14G - Kill them All] 前置知识:组合数 乘法逆元 感觉其他博客讲的不是很清楚,也没有说组合数公式是怎么来的,我这样数论极菜的萌新看了好久才想明白qwq.. 还 ...

  8. json_encode转化索引数组之后依然还是数组的问题

    小坑问题:直接上图 解决方法:(json_encode加入第二个参数) JSON_FORCE_OBJECT

  9. opencv:图像的算术操作

    前提:输入图像的大小和类型必须一致 越界处理: 大于255,则会减去255 小于0,则等于0 基本计算,加减乘除 #include <opencv2/opencv.hpp> #includ ...

  10. ScheduledThreadPoolExecutor与Timer

    首先来看一下Timer类 例子如下: package cn.concurrent.executor; import java.util.Timer; import java.util.TimerTas ...