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.鼠标移除,停止计数;

时间: 2024-10-17 04:05:12

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

C++高性能计数器——微秒级时间统计

在C++中,经常需要通过计时来统计性能信息,通过统计的耗时信息,来分析性能瓶颈,通常情况下,可能毫秒级别的时间统计就足够用了,但是在毫厘必争的性能热点的地方,毫秒级别的统计还是不够的,这种情况下,就需要至少微秒级别的统计信息,甚至要精确到CPU的指令周期级别.下面来重点说一下毫秒级的计时统计信息. 毫厘必争--微秒计时思路 在Windows平台上,用来统计微秒级别耗时信息,需要用到两个Windows API: BOOL WINAPI QueryPerformanceFrequency( _Out

HTML5 Web Worker简单使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage. 那么如何使用呢,我们看一个例子: //worker.jso

HTML5 Web Worker的使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案,我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面. 一:如何使用Worker Web Worker的基本原理就是在当前javascript的主线程中,使用Worker类加载一个javascript文件来开辟一个新的线程,起到互不阻塞执行的效果,并且提供主线程和新线程之间数据交换的接口:postMessage,onmessage. 那么如何使用呢,我们看一个例子: JavaScript 1

Web Worker——js的多线程,实现统计博客园总阅读量

前言 众所周知,js是单线程的,从上往下,从左往右依次执行,当我们有耗时的任务需要处理时,便会阻塞线程造成页面卡顿等问题.web worker的目的,就是为JavaScript创造多线程环境,允许主线程将一些任务分配给子线程.在主线程运行的同时,子线程在后台运行,两者互不干扰.等到子线程完成计算任务,再把结果返回给主线程.因此,每一个子线程就好像一个“工人”(worker),默默地完成自己的工作.更多worker的介绍请戳:JavaScript标准参考教程 本文通过web worker 统计博客

JS线程模型&amp;Web Worker

js线程模型 客户端javascript是单线程,浏览器无法同时运行两个事件处理程序 设计为单线程的理论是,客户端的javascript函数必须不能运行太长时间,否则会导致web浏览器无法对用户输入做出响应.这也是为什么Ajax的API都是异步的,以及为什么客户端Javascript不能使用一个简单的异步load()或者require()函数来加载javascript库 如果应用程序不得不执行太多的计算而导致明显的延迟,应该允许文档在执行这个计算之前完全载入,并且确保告诉用户正在进行计算并且浏览

Web Worker是什么

.Web Worker是什么 Web Worker 是HTML5标准的一部分,这一规范定义了一套 API,它允许一段JavaScript程序运行在主线程之外的另外一个线程中.Web Worker 规范中定义了两类工作线程,分别是专用线程Dedicated Worker和共享线程 Shared Worker,其中,Dedicated Worker只能为一个页面所使用,而Shared Worker则可以被多个页面所共享,本文示例为专用线程Dedicated Worker. 1.1 API快速上手 使

Web worker 与JS中异步编程的对比

0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 问,以上代码何时alert"end"呢? 测试一下:答案是:永远都不会alert. 解析:JavaScript引擎是单线程的,事件触发排队等候.所有任务按照触发时间先后排队处理. 上例中,排队的顺序状态是: | var t=true ; | while(t){}; | alert('end'); | 在

进程,线程,Event Loop(事件循环),Web Worker

线程,是程序执行流的最小单位.线程可与同属一个进程的其他线程共享所拥有的全部资源,同一进程中的多个线程之间可以并发执行.线程有就绪,阻塞,运行三种基本状态. 阮一峰大神针对进程和线程的类比,很是形象:计算机的核心CPU,是个工厂,时刻运转着,工厂里有很多个车间(进程),一个车间开工其他车间不能开工,就是说:单核CPU一次只能运行一个进程.任何时候,CPU总是运行一个进程. 而一个车间里面有很多工人(线程),协同完成一个任务.所以:一个进程可以包括多个线程.车间空间是工人共享的,一个进程中的内存空

Web Worker 多线程

Web Worker线程处理 1  浏览器把所有事件都通过操作系统安排到事件队列中(例如:你去一个·窗口买菜,需要排队):浏览器使用单线程处理队列中的事件和执行用户代码(也就是单线程:web workers除外). 因此,浏览器每次只能处理这些任务中的一个,并且任意一个任务都能阻止其他任务的执行. 2   怎样判断代码“足够快”?0.1秒的用户体验为:用户可以随意操作,无需等待:0.2~1.0秒的延迟会被用户注意到:如果超过1秒,那么用户会觉得不流畅:超过10秒,用户会非常沮丧. 手动代码检测: