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

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. OPGL+VS2017+GLFW+GLEW配置详细步骤

    OPGL+VS2017+GLFW+GLEW配置详细步骤: https://blog.csdn.net/weixin_40921421/article/details/80211813 原博客地址:ht ...

  2. 做新时代的奋斗者!(好吧,我还没弄出python的编译环境)

    Pictures: 今日分来的补记来嘞: Game 1:Guess the number. Python包含许多内建的函数,有些函数存在于称为模块的单独的程序中,可以使用import语句把它们的模块导 ...

  3. 使用maven构建项目时,SSM和springboot项目的打包与云服务器部署

    下面讲讲如何打包SSM和springboot项目,并部署到云服务器上. 由于使用的IDE不同,有的使用eclipse,有的使用idea,所以如果在IDE中按照 maven clean 再 maven ...

  4. 【网易官方】极客战记(codecombat)攻略-地牢-囚犯

    关卡连接: https://codecombat.163.com/play/level/the-prisoner 解放囚犯,你会得到盟友. 简介 敬请期待! 默认代码 # 释放囚犯,击败守卫并夺取宝石 ...

  5. xshell 链接虚拟机

    1.在虚拟机上添加网络适配器,选择仅主机模式 2. 2.启用本机的网络连接 3.在虚拟机上开启ssh服务 首先看下22端口有没开放,如果没有的话需要开启 service start sshd 4.在虚 ...

  6. Gym安装ubuntu16.04

    Step1:将gym克隆到计算机上: git clone https://github.com/openai/gym.git 如果你的电脑没有安装git,那么键入 sudo apt install g ...

  7. Abp.core中在应用层获取HttpContext对象

    实际IHttpContextAccessor对象已经在底层实现了自动的依赖注入,只需要在应用层引入Microsoft.AspNetCore.Http,然后在构造函数中依赖注入即可. /// <s ...

  8. DataGridView 更改Header样式

    '必须先设置 EnableHeadersVisualStyles 属性 才能设置Header颜色dgv.EnableHeadersVisualStyles = Falsedgv.ColumnHeade ...

  9. sublime3使用技巧

    1.鼠标悬浮,显示文件引用 Preference ——>   Settings   ——>    "index_files": true   (保存,重新打开即可) 2 ...

  10. Linux - Shell - date

    概述 date 命令 准备 OS CentOS 7.6 基本功能 显示时间 格式化时间 翻译时间 转换时间格式 切换时区 设置时间 查看文件最后使用时间 1. 显示时间 概述 基本功能 命令 # 内容 ...