js中的webworker

webworker的作用类似于java的多线程

以独立文件的形式运行webworker

  1. index.html

    <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    <title>Document</title>
    
</head>
    
<body>
    
    <div id="showBox"></div>
    
    <script>
    
        if(window.Worker) {
    
            var worker = new Worker("./test.js");
    
            worker.postMessage(10);

            worker.onmessage = function(event) {
    
                document.getElementById("showBox").innerText = event.data;
    
                if(event.data == 10) {
    
                    worker.terminate(); // 终止worker
    
                }
    
            }
    
        }else{
    
            alert("你的浏览器不支持worker");
    
        }
    
    </script>
    
</body>
    
</html>

  2. test.js

    var i = 0, count = 0; 

self.onmessage = function(e) {
    
    count = e.data;
    
}

function countNumber() {
    
    if(i < count){
    
        i = i + 1;
    
        self.postMessage(i); // 将信息发送到主线程上
    
    }
    
    console.log(i);
    
    setTimeout(countNumber, 500)
    
}
    
countNumber();

js中的webworker的更多相关文章

  1. Web worker 与JS中异步编程的对比

    0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 问,以上代码何 ...

  2. 【面试篇】寒冬求职季之你必须要懂的原生JS(中)

    互联网寒冬之际,各大公司都缩减了HC,甚至是采取了“裁员”措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力. 一年前,也许你搞清楚闭包,this,原型链,就能获得认可.但是现在 ...

  3. three.js 中使用多线程以及性能测试

    今天郭先生说一下WebWorker以及WebWorker在three.js中的应用.我们都知道Javascript是单线程的,比如执行js代码的同时UI渲染就会停止,对于多核CPU的点脑,这一点让人难 ...

  4. 5.0 JS中引用类型介绍

    其实,在前面的"js的六大数据类型"文章中稍微说了一下引用类型.前面我们说到js中有六大数据类型(五种基本数据类型 + 一种引用类型).下面的章节中,我们将详细讲解引用类型. 1. ...

  5. 【repost】JS中的异常处理方法分享

    我们在编写js过程中,难免会遇到一些代码错误问题,需要找出来,有些时候怕因为js问题导致用户体验差,这里给出一些解决方法 js容错语句,就是js出错也不提示错误(防止浏览器右下角有个黄色的三角符号,要 ...

  6. JS中给正则表达式加变量

    前不久同事询问我js里面怎么给正则中添加变量的问题,遂写篇博客记录下.   一.字面量 其实当我们定义一个字符串,一个数组,一个对象等等的时候,我们习惯用字面量来定义,例如: var s = &quo ...

  7. js中几种实用的跨域方法原理详解（转）

    今天研究js跨域问题的时候发现一篇好博,非常详细地讲解了js几种跨域方法的原理,特分享一下. 原博地址:http://www.cnblogs.com/2050/p/3191744.html 下面正文开 ...

  8. 关于js中的this

    关于js中的this this是javascript中一个很特别的关键字,也是一种很复杂的机制,学习this的第一步就是要明白this既不指向函数自身也不指向函数的词法作用域,this实际上是函数被调 ...

  9. 表值函数与JS中split()的联系

    在公司用云平台做开发就是麻烦 ,做了很多功能或者有些收获,都没办法写博客,结果回家了自己要把大脑里面记住的写出来. split()这个函数我们并不陌生,但是当前台有许多字段然后随意勾选后的这些参数传递 ...

随机推荐

  1. B树, B-树,B+树,和B*树的区别

    B树: B树的搜索,从根结点开始,如果查询的关键字与结点的关键字相等,那么就命中: 否则,如果查询关键字比结点关键字小,就进入左儿子:如果比结点关键字大,就进入 右儿子:如果左儿子或右儿子的指针为空, ...

  2. 2017年浙江工业大学大学生程序设计迎新赛热身赛-J-Forever97与寄信

    Forever97与未央是一对笔友,他们经常互相写信.有一天Forever97去邮局寄信,发现邮局的收费方式变成了按字收费,收取的费用为总字数除了其自身以外的最大因子.虽然Forever97是一个有情 ...

  3. MySQL连接中出现大量的 init 状态问题

    最怕的就是睡一觉醒来,系统出了问题. 大早系统无法登陆,以前没有经验的同学code的代码,竟然 try catch 没有记录异常日志信息. 查的问题一点头绪都没有,一直锁定在公司公共网关接口出了问题. ...

  4. Java 文件上传中转

    org.apache.commons.httpclient.methods.multipart Class MultipartRequestEntity java.lang.Object org.ap ...

  5. jqueryDom操作

    <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...

  6. 【python】python内存管理摘要

    a = 1 id(a)  == id(1) 每次退出ipython重新进入,这个Id都会不一样 sys.getrefcount(a) 可以计数某个对象的引用次数,是原来的次数+1 垃圾回收 使用gc包 ...

  7. PostgreSQL EXPLAIN执行计划学习--多表连接几种Join方式比较

    转了一部分.稍后再修改. 三种多表Join的算法: 一． NESTED LOOP: 对于被连接的数据子集较小的情况,嵌套循环连接是个较好的选择.在嵌套循环中,内表被外表驱动,外表返回的每一行都要在内表 ...

  8. PostgreSQL日志配置记录

    日志审计  审计是值记录用户的登陆退出以及登陆后在数据库里的行为操作,可以根据安全等级不一样设置不一样级别的审计, 此处涉及的参数文件有: logging_collector      --是否开启日 ...

  9. Arcgis for Js之Graphiclayer扩展详解

    在前两节,讲到了两种不同方式的聚类,一种是基于距离的,一种是基于区域范围的,两种不同的聚类都是通过扩展esri/layers/GraphicsLayer方法来实现的.在本节,就详细的讲讲esri/la ...

  10. bzoj 1500 维修序列

    Written with StackEdit. Description 请写一个程序,要求维护一个数列,支持以下 \(6\) 种操作: 请注意,格式栏 中的下划线' _ '表示实际输入文件中的空格 I ...