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

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. 使用命令把SpringBoot项目打包成可运行的jar包(简洁,操作性强)

    前几天接到一个需求,要把原系统中一个数据处理小功能搬出原系统,拉出来单独做一个SpringBoot项目,然后打成jar包扔到Windows服务器上运行,这样数据处理的时候如果遇到堵塞就不至于整个系统都 ...

  2. vue updated

    updated方法的触发条件———— 当data中定义的数据有变化时就会加载updated方法

  3. 6.mybatis----日志工厂

    日志工厂 如果一个数据库操作出现了异常,我们需要排错,所以说日志就是最好的助手 曾经:sout,debug 现在:日志工厂 在Mybatis中具体使用哪一个日志,在设置中设定 咋设定? 在mybati ...

  4. [lua]紫猫lua教程-命令宝典-L1-03-01. 闭包

    L1[闭包]01. 函数的传递赋值 没什么说的 1.函数作为变量来看 可以轻松的声明 相互赋值 2.函数变量本质是 一个内存指针 所以函数变量的相互赋值不是传递的函数本身 而是指向这个函数的内存地址 ...

  5. Codeforces Round #619 (Div. 2)D(模拟)

    先把一种最长路线记录下来,根据k的大小存到ans中相应的答案再输出 #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> using n ...

  6. Lowest Common Multiple Plus 题解

    求n个数的最小公倍数. Input输入包含多个测试实例,每个测试实例的开始是一个正整数n,然后是n个正整数. Output为每组测试数据输出它们的最小公倍数,每个测试实例的输出占一行.你可以假设最后的 ...

  7. LPR-贷款市场报价利率

    贷款市场报价利率(Loan Prime Rate)介绍: 贷款市场报价利率(Loan Prime Rate,简称LPR)是商业银行对其最优质客户执行的贷款利率,其他贷款利率可在此基础上加减点生成.贷款 ...

  8. NABCD model作业

    1)N(Need需求) 随着人类生活的快速发展,给人们带来了许多的便利,同时也给我们带来了一些麻烦,而我的拼图这个小游戏可以在人们在无聊时玩一玩,也可以给小孩子开发智力. 2)A(Approach做法 ...

  9. Go_goroutine初识

    package main import ( "fmt" ) func main() { /* 一个goroutine打印数字,另外一个goroutine打印字母,观察运行结果.. ...

  10. 查询数据操作:limit

    1.作用: 在查看数据时用于限制获得的记录数量,一般放在最后. 2.语法: limit offset,row_count; 解析: offset:偏移量,索引值默认从0开始,可以省略 row_coun ...