<!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. jQuery刷新div内容，并对刷新后元素绑定事件。$(document).on()

    给id=zt的元素绑定点击事件 点击刷新id=ps_list中类容(内容中含有id=zt元素) 把zt的点击事件委托到了document上,这样就不用考虑事件是否能绑定到新加元素上 代码如下: $(d ...

  2. Java面向对象设计题2

    有感于很多新人都不知道怎么学习软件开发,个人感觉还是因为练习做的太少,软件开发知识想看懂太难了,必须是边读资料边动手练习.莫说是新人,Java老人研究新技术的时候也是边读资料边练习.因此整理和编排了一 ...

  3. 数据库实例创建好后，用plsql登录居然提示ora-12526监听程序:所有适用例程都处于受限模式的问题

    解决办法:以sys身份登录执行该语句:ALTER SYSTEM DISABLE RESTRICTED SESSION;

  4. 【WinAPI】User32.dll注释

    #region User32.dll 函数 /// <summary> /// 该函数检索一指定窗口的客户区域或整个屏幕的显示设备上下文环境的句柄,以后可以在GDI函数中使用该句柄来在设备 ...

  5. 剑指Offer43 n个骰子点数概率

    /************************************************************************* > File Name: 43_Dics.c ...

  6. Windows重新建立图标缓存

    有的时候,快捷方式的图标会因各种优化软件而变得面目全非,这时就需要重新建立图标缓存 新建一个文本文档,把文件的后缀名修改成.bat 的例如 icon.bat 在里面填写下面的内容: rem 关闭exp ...

  7. Mac和Linux下测试端口是否存活一法[转载]

    测试端口存活的最常用的方法是telnet $telnet 127.0.0.1 80 不过这个方法有一个不方便的地方:连接成功后会进入交互模式,需要按 ctrl + ] 和 q 才能退出. 后来,经过网 ...

  8. Hartree-Fock理论（更新中）

    预备知识: 基组 分子轨道基本概念与Hartree Product 平均场与Fock算符 在忽略分子中电子的相互作用时,我们有了一个粗糙的模型,虽然非常容易求解,但是描述的精确程度非常差. 考虑电子的 ...

  9. Nginx服务器不支持PATH_INFO的问题及解决办法

    最近在写一个小程序,然后里面自己写了个URL的处理器,比如说访问index.php/article 那么就会自动加载进来article页面,访问index.php/home就会自动加载home页面. ...

  10. MongoDB - The mongo Shell, mongo Shell Quick Reference

    mongo Shell Command History You can retrieve previous commands issued in the mongo shell with the up ...