<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>HTML5-WebWorker</title>

    </head>

    <body>

        web worker实时时间：<div id="workerTime"></div>

        <br />

        主线程获取当前时间：<div id="curTime"></div>

        <button onclick="mainthread()">主线程获取时间</button>

        <script type="text/javascript">

            /*

             * Web worker的运行原理和两种线程的详细说明 : http://www.ibm.com/developerworks/cn/web/1112_sunch_webworker/

             */

            var interval;

            if (typeof Worker != undefined) {

                var worker = new Worker("js/webworker.js");

                worker.onmessage = function (event)

                {

                    document.getElementById("workerTime").textContent = event.data;

                }

                interval = setInterval('worker.postMessage("1000000")', 1000);

            }

            function mainthread() {

                document.getElementById("curTime").textContent = new Date();

            }

            function stop() {

                clearInterval(interval);

    　　　　　　　worker.terminate();

            }

            setTimeout(stop, 60000);//60秒之后清理interval

        </script>

    </body>

</html>

webworker.js

onmessage = function(event) {

    var msg = event.data;

    for (var i = 0; i < msg; i++) {

        if (!!console && i % 500 == 0) {

            console.info(i);

        }

    }

    var d = new Date();

    postMessage(d);

}

HTML5-WebWorker的更多相关文章

  1. 【javascript】谈谈HTML5: Web-Worker、canvas、indexedDB、拖拽事件

    前言:作为一名Web开发者,可能你并没有对这个“H5”这个字眼投入太多的关注,但实际上它早已不知不觉进入到你的开发中,并且总有一天会让你不得不正视它,了解它并运用它   打个比方:<海贼王> ...

  2. HTML5触屏版多线程渲染模板技术分享

    前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...

  3. JavaScript单线程和浏览器事件循环简述

    JavaScript单线程 在上篇博客<Promise的前世今生和妙用技巧>的开篇中,我们曾简述了JavaScript的单线程机制和浏览器的事件模型.应很多网友的回复,在这篇文章中将继续展 ...

  4. 再看JavaScript线程

    继上篇讨论了一些关于JavaScript线程的知识,我们不妨回过头再看看,是不是JavaScript就不能多线程呢?看下面一段很简单的代码(演示用,没考虑兼容问题): 代码判断一: <div i ...

  5. HTML5学习总结-06 WebWorker

    一 WebWorkder 它允许开发人员编写能够长时间运行而不被用户所中断的后台程序,去执行事务或者逻辑,并同时保证页面对用户的响应.简而言之,就是允许JavaScript创建多个线程,但是子线程完全 ...

  6. HTML5系列四（WebWorker、地理定位）

    WebWorker简单应用 先从一个简单例子说起,计算数值加法 <script> var worker = new Worker('sumCalculate.js'); worker.on ...

  7. HTML5 学习总结（一）——HTML5概要与新增标签

    一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...

  8. HTML5 学习笔记（一）——HTML5概要与新增标签

    目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...

  9. 浅谈webWorker

    一.webWorker之初体验 在"setTimeout那些事儿"中,说到JavaScript是单线程.也就是同一时间只能做同一事情. 也好理解,作为浏览器脚本语言,如果JavaS ...

  10. 【转】HTML5的小知识点小集合

    html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...

随机推荐

  1. 存储过程 <3> 和函数的区别

    二.函数和存储过程的优点: 1.共同使用的代码可以只需要被编写一次,而被需要该代码的任何应用程序调用(.net,c++,java,也可以使DLL库). 2.这种几种编写.几种维护更新.大家共享的方法, ...

  2. 页面 Backspace 功能禁锢

    var flag=false; window.document.onkeydown = function keyDown() { if(event.keyCode==8){ event.returnV ...

  3. JAVA数字证书制作生成

    1.加密算法 为了网络通讯中的报文安全,一般需要对报文进行加密,目前常用的加密算法有: 非对称加密算法:又称公钥加密算法,如RSA.DSA/DSS,最常用的就是RSA算法(算法公开,可自行百度了解算法 ...

  4. 20145102 《Java程序设计》第4周学习总结

    20145102 <Java程序设计>第4周学习总结 教材学习内容总结 面向对象中,子类继承父类,避免重复的行为定义,不过并非为了避免重复定义行为就使用继承.如果正确判断使用继承的时机,以 ...

  5. js 数组中随机出来N组

    var word = []; while (word.length < 7) { var tmp = data[parseInt(Math.random() * data.length)]; v ...

  6. 页面modal服务

    /** * * * 初始化: * var oneModal = modalSvc.createModal(templateUrl, controller, size); * size可以是:lg或sm ...

  7. 深入浅出ExtJS 第二章 Ext框架基础

    2.1 面向对象的基础架构(对象模型) 2.1.1 创建类 >.定义一个类: Ext.define('demo.Demo',{ name:'Lingo', hello:function () { ...

  8. Log4net记录日志存库并存本地

    <?xml version="1.0" encoding="utf-8"?> <configuration> <configSec ...

  9. Android-短信验证

    一.mob.com移动开发者服务平台(ShareSDK)的认识 该平台主要是致力于解决移动开发者的实际需求,同时也致力于一些第三方平台的框架支持,那么这样我们可以更方便的将一些功能集成到我们的App中 ...

  10. Oracle 学习笔记2：几个入门常用命令

    oracle提供的交互方式有两种:sqlplus(命令行) sqlplusw(图形界面) 进入sqlplus方式:cmd中输入sqlplus 进入sqlplusw方式:cmd中输入sqlplusw 更 ...