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

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. JFrog推出全球首个支持混合云架构,端到端的通用DevOps平台 ——JFrog Platform

            JFrog Platform,基于屡获殊荣的JFrog Artifactory制品仓库的独特能力,通过多合一的体验提供DevSecOps.CI / CD和软件分发的解决方案. 2020 ...

  2. centos 配置安装golang

    golang的官方下载和安装介绍: https://golang.org/doc/install 按照如下步骤安装绿色版golang ,不需要编译,解压就可以用 1)下载tar.gz 安装包 2)直接 ...

  3. Win10 系统运行VsCode出现白屏的问题(亲测有效)

    Win10 系统运行VsCode出现白屏的问题(亲测有效) 新买的本本,昨天VScode运行还正常,今天打开一直白屏,什么都没有,只有几个小格格,也不是卡死的那种,可以轻松关闭, 刚开始以为版本问题, ...

  4. TCP/IP详解,卷1:协议--1

    引言 很多不同的厂家生产各种型号的计算机,它们运行完全不同的操作系统,但 T C P / I P 协议 族允许它们互相进行通信.这一点很让人感到吃惊,因为它的作用已远远超出了起初的设想. T C P ...

  5. bugku 白哥的鸽子

    首先下载之后发现是一个txt 然后更改一下后缀名发现这是一张jpg 图片然后看一下属性然后用hxd分析一下 看看有没有zip 发现没有 然后拖到地下然后发现有一串密码有些问题 然后查一下发现是 栏杆密 ...

  6. Java进阶学习(6)之抽象与接口

    抽象与接口 抽象 抽象函数 表达概念而无法实现具体代码的函数 抽象类 表达概念而无法构造出实体的类 有抽象函数的类也可以有非抽象函数 实现抽象函数 继承自抽象类的子类必须覆盖父类中的抽象函数 抽象 与 ...

  7. springboot @ComponentScan注解

    @ComponentScan 告诉Spring从哪里找到bean. 如果你的其他包都在@SpringBootApplication注解的启动类所在的包及其下级包,则你什么都不用做,SpringBoot ...

  8. 微信小程序--缓存,支持过期时间的二次开发封装

    简介 微信小程序提供了缓存的api,包括同步和异步两种,具体api不多说明,可自行查看官方文档 现在微信小程序缓存api存在一个问题就是没有设定过期时间,下面给大家介绍一下对小程序缓存的二次封装,使其 ...

  9. 【资源分享】半条命2速通AHK脚本

    *----------------------------------------------[下载区]----------------------------------------------* ...

  10. CentOS7修改主机名的三种方法

    在CentOS7中,有三种定义的主机名: 静态的(Static hostname) “静态”主机名也称为内核主机名,是系统在启动时从/etc/hostname自动初始化的主机名. 瞬态的(Tansie ...