web-worker计数器，根据输入时间统计次数
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计数器，根据输入时间统计次数的更多相关文章
- 深入理解javascript异步编程障眼法&&h5 web worker实现多线程
0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 1 2 3 4 ...
- HTML5 Web Worker的使用
Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Wo ...
- 深入理解JS异步编程四（HTML5 Web Worker）
>Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker We ...
- HTML5 Web Worker简单使用
Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Wo ...
- 过段时间逐步使用HTML5新增的web worker等内容
想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...
- 新兴的API(fileReader、geolocation、web计时、web worker)
requestAnimationFrame() 每次浏览器重绘之前会调用这个方法!!! 它接收一个参数,就是回调函数: 它可以保证在最佳的间隔时间调用传入的回调函数,以达到让屏幕产生最流畅的动画效果. ...
- JavaScript多线程之HTML5 Web Worker
在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...
- JS线程模型&Web Worker
js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做 ...
- 【转向Javascript系列】深入理解Web Worker
本文首发在alloyteam团队博客,链接地址http://www.alloyteam.com/2015/11/deep-in-web-worker/ 上一篇文章<从setTimeout说事件循 ...
随机推荐
- 经典算法题每日演练——第十七题 Dijkstra算法
原文:经典算法题每日演练--第十七题 Dijkstra算法 或许在生活中,经常会碰到针对某一个问题,在众多的限制条件下,如何去寻找一个最优解?可能大家想到了很多诸如“线性规划”,“动态规划” 这些经典 ...
- C#关于HttpClient的统一配置（一）
public class BaseHttpClient { protected string contentType; public BaseHttpClient() { this.contentTy ...
- hdu1286 寻找新朋友 （欧拉功能）
原标题:点击打开链接 关于欧拉函数的算法具体解说:点击打开链接 欧拉函数 1.欧拉函数是不全然积性函数. 2.欧拉函数p(x) = x * (p1 - 1) / p1 * (p2 - 1)/p2 * ...
- 关于JavaScript中计算精度丢失的问题
摘要: 由于计算机是用二进制来存储和处理数字,不能精确表示浮点数,而JavaScript中没有相应的封装类来处理浮点数运算,直接计算会导致运算精度丢失. 为了避免产生精度差异,把需要计算的数字升级(乘 ...
- PHP第六课 使用方法数组
学习要点: *使用主阵列功能的理解 *知道如何遍历 *了解超全局数组和使用的基本关系 数组 1.数组定义和遍历 2.数组函数 数组定义: $arr=array(1,2,3);//索引数组,下标全是数字 ...
- java_eclipse_maven_svn_主题彩色插件_全屏插件
作为一名不算新手的猿猿,还来纠结IDE环境搭建实属不该,不过着实纠结了不少时间. target: eclipse + maven +svn + 设置默认编码+全屏 绕的路就不说了,直奔主题,由于mav ...
- B二分法
<span style="color:#330099;">/* B - 二分法 基金会 Time Limit:1000MS Memory Limit:65536KB 6 ...
- 百度地图API 添加自定义标注 多点标注
原文:百度地图API 添加自定义标注 多点标注 分四个文件 location.php map.css 图片 数据库 数据库配置自己改下 -------------------------------- ...
- Struts2 整合jQuery实现Ajax功能(2)
1.1.1 Action利用struts2-json-plugin-X.X.X.jar响应Json格式信息: 1. function removerecordbyid(recordid) ...
- 10个实用的PHP正则表达式汇总
原文 10个实用的PHP正则表达式汇总 正则表达式是程序开发中一个重要的元素,它提供用来描述或匹配文本的字符串,如特定的字符.词或算式等.但在某些情况下,用正则表达式去验证一个字符串比较复杂和费时.本 ...