<!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. c#读写ini配置文件示例

    虽然c#里都是添加app.config 并且访问也很方便 ,有时候还是不习惯用他.那么我们来做个仿C++下的那种ini配置文件读写吧     其他人写的都是调用非托管kernel32.dll.我也用过 ...

  2. HTML与Servlet

    1.什么是servlet Servlet 是在服务器上运行的小程序.一个 Servlet 就是 Java 编程语言中的一个类,它被用来扩展服务器的性能,服务器上驻留着可以通过“请求-响应”编程模型来访 ...

  3. [super dealloc]内存释放的先后顺序

    心得:从前做内存释放,只是觉得应该,没体会到这个的重要性,如果不及时释放就会有很多内存泄露,就像我早期遇到的前赴后继的崩溃,比如:没使用完,就释放会崩溃等明显的release问题.     作为全局的 ...

  4. 观察者模式（一）--《Head First DesignPattern》

    观察者模式定义了对象之间的一对多依赖,这样一来,当一个对象改变状态时,它的所有依赖着都会受到通知并且自动更新. 我们先看下类图: 首先我们自己创建Subject接口,定义了注册观察者,移除观察者和通知 ...

  5. css 所有选择器

    选择器 例子 例子描述 CSS .class .intro 选择 class="intro" 的所有元素. 1 #id #firstname 选择 id="firstna ...

  6. PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法

    这篇文章主要介绍了PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法,是在进行PHP数据库程序开发中常会遇 ...

  7. hadoop2.6.0+eclipse配置

    [0]安装前的声明 0.1) 所用节点2个 master : 192.168.119.105 hadoop5 slave : 192.168.119.101 hadoop1 (先用一个slave,跑成 ...

  8. 剑指Offer02 替换空格

    /************************************************************************* > File Name: 02_Replac ...

  9. Python中的内置函数

    2.1 Built-in Functions The Python interpreter has a number of functions built into it that are alway ...

  10. 转：云风skynet服务端框架研究

    转:  http://forthxu.com/blog/skynet.html skynet是云风编写的服务端底层管理框架,底层由C编写,配套lua作为脚本使用,可换python等其他脚本语言.sky ...