<!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. Linux下mv命令详解

    mv命令格式:mv [选项] 源文件或目录 目标文件或目录 mv命令参数(选项): -b :若需覆盖文件,则覆盖前先行备份. -f :force 强制的意思,如果目标文件已经存在,不会询问而直接覆盖: ...

  2. Python笔记（二）

    在昨天学习Python之后,感觉它的的确确挺简洁,也挺容易学习.在昨天的学习中我们了解到了Python中while循环语句以及if...else语句的使用,while语句的使用格式是这样的:while ...

  3. C#面向对象（四）虚方法实现多态

    一.虚方法实现多态 1,创建一个people基类 using System; using System.Collections.Generic; using System.Linq; using Sy ...

  4. java解析excel2003和excel2007：The supplied data appears to be in the office 2007+XML Polonly supports OLE2 office documents

    上传excel解析存到数据库时报: org.apache.poi.poifs.filesystem.OfficeXmlFileException: The supplied data appears ...

  5. jQery简单Tab选项卡效果

    简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  6. 【Android 界面效果39】android:inputType问题

    1.  在XML代码中实现比较简单, 直接设置android:inputType="textMultiLine": [mw_shl_code=java,true]<EditT ...

  7. vb.net机房收费系统之组合查询

    我个人一直认为,组合查询是机房收费系统的一个难点,尤其是用到三层之后,如果要为组合查询中的每一个查询建立一个显然是太麻烦了. 下面介绍一下我的方法,对大家起个参考作用. 我将该表中可输入的内容定义为一 ...

  8. 各种"居中"

    先看效果 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> < ...

  9. 怒刷DP之 HDU 1114

    Piggy-Bank Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit S ...

  10. DWZ按钮居中显示