web Worker:
web Worker是运行在后台的javascript,不会影响性能,常用于高耗费CPU的任务,必须部署到线上才可以正常使用,这里有三个方法比较重要,需要注意:
postMessage(),发送消息,指的是在创建的后台web works文件中发送消息,供主页中onmessage()事件接收,此事件的对象将包含要发送过来的值。
terminate(),用来停止web worker,使用方法:在Worker对象调用即可。
onmessage(),使用web worker后,要new 创建Worker对象,如new Worker(worker.js),onmessage是这个对象的一个方法,后面的函数中的事件对象则包含所有信息,如下:
其中data属性即可拿到发送过来的值,具体使用步骤如下:
test.js文件中的web Worker代码:
// 1.创建一个名为test.js的worker文件,放到test.html相同目录下:
var sum = 0; //声明全局变量,下面计时器中sum才能完成不断自加:
setInterval(function() {
sum++;
postMessage(sum); //2.将sum发送给worker对象
}, 1000);
html文件中javascript代码:
<script>
// 获取DOM元素,供下面操作:
var spans = document.querySelector('span');
var start = document.querySelector('.start');
var stops = document.querySelector('.stop');
var workers; //3.声明全局变量,供后面接收worker对象;若声明为局部变量,后面stop事件中workers.terminate()将不能给undefined设置此方法
// 4.定义一个执行创建worker对象并接收消息的函数:
function startSum() {
workers = new Worker('test.js'); // 创建一个web Worker对象,括号中传入web Worker文件的路径,注意实际开发中因做兼容处理,某些浏览器不支持此属性时,因返回相关提示
// 使用onmessage方法将发送的消息接收到此作用域:
workers.onmessage = function(event) {
var datas = event.data; // 将接收到的数据赋值给变量datas
spans.innerText = datas; // 将datas设置给spans元素
};
};
// 5.定义一个关闭web worker的函数:
function stopSum() {
workers.terminate();//停止workers
};
// 当点击stops时执行stopSum()函数停止workers:
stops.onclick = function() {
stopSum();
};
// 当点击开始时执行startSum()函数开始workers:
start.onclick = function() {
startSum();
};
</script>
特别提醒:案例必须部署到服务器上才可以正常运行,本地打开会报类似的错误:Uncaught DOMException: Failed to construct ‘Worker’: Script at ‘file:///C:/Users/17121/Desktop/test/test.js’ cannot be accessed from origin ‘null’.
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者 删除。
笔者:苦海