<!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. kafka java客户端编程

    kafka_2.10-0.8.1.1 maven <dependencies> <dependency> <groupId>org.apache.kafka< ...

  2. ASP.NET MVC与WebForm区别

    [转贴一] 使用ASP.NET MVC框架,创建默认项目,第一直观感觉就是地址都是Rewrite过的.对源码和配置文件稍加分析不难看出,MVC使用了httpModules来拦截地址请求,具体用到了Sy ...

  3. 根据当前IP获取当时所在信息

    现在很多系统,都要在登录时候,确定当前用户所在的位置.这里记录一个C#使用Http的方式获取当前IP所在的位置信息.主要使用的api是新浪的接口. public partial class sina ...

  4. 从零开始学JAVA(05)－连接数据库MSSQL(JDBC代码篇)

    MSSQL的JDBC驱动下载好以后就可以写代码了. 1.新建项目,项目名为SqlJdbc.新建类,类名为SqlTest,同时勾选public static void main(String[] arg ...

  5. Java基础知识强化之IO流笔记81：NIO之 DatagramChannel

    1. Java NIO中的DatagramChannel是一个能收发UDP包的通道.因为UDP是无连接的网络协议,所以不能像其它通道那样读取和写入.它发送和接收的是数据包. 2. DatagramCh ...

  6. Android之旅：梦想、学习、坚持、自信、淡定

    前段时间参加了2012年度IT博客大赛,进了前十强,写了一篇获奖感言,不过还没正式在CSDN发表出来.眼看2012年就要结束了,刚好借这个机会将2012年度IT博客大十强获奖感言发表出来,也算是对20 ...

  7. webSocket开源框架:SocketRocket 简单的使用

    需要用到webSocket,所以搜集了一下使用方法, git下载地址:square/SocketRocket gitHUB 上没有看懂,就要 cocoaPod 导入了 socketRocket 导入这 ...

  8. 《Cortex-M0权威指南》之体系结构---存储器系统

    转载请注明来源:cuixiaolei的技术博客 Cortex-M0处理器为32位处理器,所以具有最大4G的寻址空间.在体系结构上,存储器空间被划分位一系列的区域,每个区域都有推荐的用途,以提高不同设备 ...

  9. CF 163E. e-Government ac自动机+fail树+树状数组

    E. e-Government 题目: 给出n个字符串,表示n个人名,有两种操作: ?string ,统计字符串string中出现的属于城市居民的次数. +id,把编号为id的人变为城市居民,如果已经 ...

  10. AI-->从新建文档开始说起，串联相关色彩知识

    相关概念:AI.PS.矢量图形 AI:  Adobe Illustrator 是Adobe公司出品的一款用于矢量图形设计的软件. 矢量图形:用通俗的大白话讲与分辨率无关,可以任意的放大缩小而不会失真图 ...