1.用web-worker实现：另起一个线程，将计数工作运行在后台的JavaScript文件，并返回累加后的结果。

该js文件运行于后台，独立于其他脚本，不会影响页面的性能。html页面可以继续做任何事情，而此时web worker在后台运行，互不干扰。

在用chrome调试时候出现错误：

Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///Users/***/Desktop/myworker.js' cannot be accessed from origin 'null'.

原因在于：“Chrome doesn't let you load web workers when running scripts from a local file. Note: Firefox won't work either. Try Safari. ”；

附上链接：http://stackoverflow.com/questions/21408510/chrome-cant-load-web-worker

2.根据用户输入时间间隔来计数，比如输入1000，则每隔一秒计数一次；

3.test.html用postmessage向myworkers.js传消息，并用onmessage方法收消息；

myworkers.js用postmessage给test.html发消息，但是通过self.addEventListener('message', function(e){});来捕获message事件，获取test.html发来的消息。通常我们用window.addEventListener('message',function(e){});来添加消息事件，但是web worker不支持window object（http://stackoverflow.com/questions/11219775/global-variable-in-web-worker），所以只能用self；

test.html页面如下：

<html>

<script type="text/javascript">

    var myworker;

    var i = 10;

    myworker = new Worker("./myworker.js");

    myworker.onmessage = function(event){

        document.getElementById("result").innerHTML = event.data;

    }

    function countStart(){

        var value = document.getElementById("textinput").value;

        myworker.postMessage({"moustevent":1,"textinput":value});//1 start count

    }

    function countStop(){

        myworker.postMessage({"moustevent":0});

    }

</script>

<style type="text/css">

    .countTime{

        width:100px;

        height:100px;

        background-color:blue;

    }

</style>

<body>

    <p>Count numbers: <output id="result"></output></p>

    <div class="countTime" id="countTime" onmouseover="countStart()" onmouseout="countStop()"></div>

    <p>Please Input Interval Time:</p>

    <input id="textinput" type="number" ></input>

</body>

</html>

注意：

如果想post多个参数，可以考虑post一个json过去；

myworker.js

var i  = 1;

var pid = 0;

var tmp;

function countTime(){

    i+=1;

    postMessage(i);

};

//add event listener to handle the different message

self.addEventListener('message', function(e){

    //if message  == 1 start count

    tmp = e.data["textinput"];

     if(1 == e.data["moustevent"]){

       if(tmp <= 0) tmp = 1000;

       pid = setInterval(countTime, tmp);

    }

    //if message == 0 stop count

    else{

       clearInterval(pid);

    }

});

注意：

要clearInterval必须有个id指明注销那个interval，所以定义时pid = setInterval(countTime, tmp);

注销时clearInterval(pid);

如图所示：

1.鼠标放在蓝色框上面开始计时；

2.输入框为600，则每隔600毫秒计数器加一，否则，默认1000毫秒；

3.鼠标移除，停止计数；

web-worker计数器，根据输入时间统计次数的更多相关文章

  1. 深入理解javascript异步编程障眼法&&h5 web worker实现多线程

    0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 1 2 3 4 ...

  2. HTML5 Web Worker的使用

    Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Wo ...

  3. 深入理解JS异步编程四（HTML5 Web Worker）

    >Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker We ...

  4. HTML5 Web Worker简单使用

    Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Wo ...

  5. 过段时间逐步使用HTML5新增的web worker等内容

    想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...

  6. 新兴的API(fileReader、geolocation、web计时、web worker)

    requestAnimationFrame() 每次浏览器重绘之前会调用这个方法!!! 它接收一个参数,就是回调函数: 它可以保证在最佳的间隔时间调用传入的回调函数,以达到让屏幕产生最流畅的动画效果. ...

  7. JavaScript多线程之HTML5 Web Worker

    在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...

  8. JS线程模型&Web Worker

    js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做 ...

  9. 【转向Javascript系列】深入理解Web Worker

    本文首发在alloyteam团队博客,链接地址http://www.alloyteam.com/2015/11/deep-in-web-worker/ 上一篇文章<从setTimeout说事件循 ...

随机推荐

  1. error：stray&#39;\243&#39;in program

    error:stray'\243'in program 问题:       C原因在编译时出现例如以下错误 error:stray'\243'in program 错误原因: 非 - 标准ascII字 ...

  2. 前端学习笔记(zepto或jquery)——对li标签的相关操作（三）

    对li标签的相关操作——八种方式遍历li标签并获取其值 $("ul>li").forEach(function(item,index){ alert(index+" ...

  3. iOS8开发～UI布局（二）storyboard中autolayout和size class的使用具体解释

    一.概要:前一篇初步的描写叙述了size class的概念,那么实际中怎样使用呢,以下两个问题是我们一定会遇到的: 1.Xcode6中添加了size class,在storyboard中怎样使用? 2 ...

  4. svnclient本地化和异常处理

    svn中国本土化,首次安装client.然后下载语言包的相应版本,然后将语言设置为英文! 我碰到汉化失败的案例:client与语言包版本号不匹配 之前安装的语言包: 下载相应语言包: 假设之前安装了, ...

  5. ASP.NET MVC 插件化

    ASP.NET MVC 插件化机制 2015-03-14 22:25 by 杨康新, 1328 阅读, 15 评论, 收藏, 编辑 概述 nopCommerce的插件机制的核心是使用BuildMana ...

  6. MVC应用程序使用Web Services(asmx)

    原文:MVC应用程序使用Web Services(asmx) 这次,我们练习MVC应用程序中,应用web service.先在MVC应用程序中创建一个目录Services,将用来存储Service.a ...

  7. leetcode先刷_Unique Binary Search Trees II

    可能没想到,人的简单方法,关于质询的问题提出做. 如何把产生出来的所有的树木?所使用的方法当然是递归,但是有一个致命的问题,假设根节点,然后做一个递归,所以这是非常多的公共树木的根,结果肯定是一团糟. ...

  8. [顶]ORACLE PL/SQL编程详解之二：PL/SQL块结构和组成元素(为山九仞，岂一日之功)

    原文:[顶]ORACLE PL/SQL编程详解之二:PL/SQL块结构和组成元素(为山九仞,岂一日之功) [顶]ORACLE PL/SQL编程详解之二: PL/SQL块结构和组成元素(为山九仞,岂一日 ...

  9. jQuery EasyUI API - Base - Draggable [原创汉化官方API]

    最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...

  10. Spring Resource之ResourceLoader

    ResourceLoader接口意味着任何实现的对象都能够返回Resource实例. public interface ResourceLoader { Resource getResource(St ...