var jsId = "00001"; var worker = new Worker('js/setTime.js'); worker.postMessage(jsId);
worker线程中:
//接受事件参数onmessage = function(e) { console.log(e.data[0]) }
这样就完成了一个主线程向worker线程传递参数的过程。同样如果worker线程要向主线程传递参数反过来写即可。
onmessageerror:
在消息传递过程出现错误的属性事件。示例:worker.onmessageerror=function(){....};
方法
postMessage:
向线程worker的内部范围发送消息,可以设置参数,发送给worker线程的数据。在onmessage中接受。
terminate:
过多的开启worker线程非常浪费资源所以在使用过后可以终止它,终止方法使用terminate()。示例:worker.terminate();
close:
除了上面的关闭,如果是在worker线程自身也可以使用self.close()关闭。
计时器示例
上面说了那么多都是介绍worker的一些基本属性或者方法的使用。下面通过具体的示例来看效果。
我们就拿最常用的倒计时来做示例说明。很简单的一个例子。我们在业务中经常遇到倒计时业务,在倒计时的时候还要做一些其他的业务。因为js单线程的特性,你会发现你的倒计时在你进行其他业务操作的时候是暂停了的。例如现在是9:57你进行了三秒的业务处理。等业务处理完成应该是:9:54,但是你的倒计时还是9:57.就很明显的说明了这一个现象。
场景业务设计
那么我们现在设计这么一个业务操作,
- 首先我们页面有一个定时器和一个业务操作按钮(用来模拟耗时的操作)。
- 然后把定时器写到一个worker中进行倒计时操作。
- 最后通过消息通讯把每次的倒计时时间发送给主线程让主线程修改显示时间。
- 结束倒计时完毕结束定时器和线程
有人可能会说为什么还要回到主线程修改时间显示值,请看一下上面的使用规则,我本来也是打算进行主线程传值dom给worker线程奈何不行只能在回传回来。
代码展示
Html代码:
<body> <div> <span id="Minute_p">10</span> : <span id="Second_p">00</span> </div> <button type="button" onclick="business()">耗时操作</button>
</body>
主线程js代码:
//页面加载完成后初始化 window.onload = function() { //创建定时器线程 var worker = new Worker('js/setTime.js'); //获取dom对象 var domMinute_p = document.getElementById('Minute_p'); var domSecond_p = document.getElementById('Second_p'); worker.postMessage(600); //这里可以接受worker线程的返回值 worker.onmessage = function(event) { var totalSecond = event.data; console.log(totalSecond) //计算分钟数 var minute_p = parseInt(totalSecond / 60); domMinute_p.innerText = minute_p; //

