翼度科技»论坛 编程开发 html5 查看内容

HTML5 Web Worker(多线程处理)

4

主题

4

帖子

12

积分

新手上路

Rank: 1

积分
12
概述

JavaScript的执行环境是单线程的,也就是一次只能执行一个任务。如果遇到多个任务时,只能排队依次执行。
在HTML5中,可以使用Web Worker创建一个后台线程执行一个耗时任务,而不会影响页面响应。
简单使用

Web Worker技术基本原理就是:在当前JavaScript的主线程中,使用Worker()构造函数新建一个worker实例,然后加载某一个JavaScript文件,发送给一个后台线程来处理(注意,这里是后台线程)。
worker.html
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <script>
  7.                         //创建worker
  8.                         var worker = new Worker("worker.js");
  9.                         //向后台线程发送数据
  10.                         worker.postMessage("hello world");
  11.                         //监听后台线程返回的数据
  12.                         worker.onmessage = function(e) {
  13.                                 console.log("前台线程收到:" + e.data);
  14.                         };
  15.                 </script>
  16.         </head>
  17.         <body>
  18.         </body>
  19. </html>
复制代码
worker.js
  1. onmessage = function(e) {
  2.         //接收前台发来的数据
  3.         var d = e.data;
  4.         console.log("后台线程收到:" + d);
  5.         var str = d.split("").reverse().join("");
  6.         postMessage(str);
  7. };
复制代码

处理复杂数据

worker.html
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title></title>
  6.                 <script>
  7.                         var worker;
  8.                         window.onload = function() {
  9.                                 var start = document.getElementById("start");
  10.                                 var stop = document.getElementById("stop");
  11.                                 start.onclick = function() {
  12.                                         worker = new Worker("worker.js")
  13.                                         worker.onmessage = function(e) {
  14.                                                 console.log("前台接收:" + e.data);
  15.                                         }
  16.                                 }
  17.                                 stop.onclick = function() {
  18.                                         worker.terminate();
  19.                                 }
  20.                         }
  21.                 </script>
  22.         </head>
  23.         <body>
  24.                 <button id="start">开始</button>
  25.                 <button id="stop">停止</button>
  26.         </body>
  27. </html>
复制代码
worker.js
  1. var i = 0;

  2. function handleTask() {
  3.         i++;
  4.         console.log("handle:" | i);
  5.         postMessage(i);
  6. }
  7. setInterval(handleTask, 1000);<font face="Tahoma"><span style="white-space: normal;"> </span></font>
复制代码
到此这篇关于HTML5 Web Worker(多线程处理)的文章就介绍到这了,更多相关HTML5 Web Worker内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

来源:https://www.jb51.net/html5/862727.html
免责声明:由于采集信息均来自互联网,如果侵犯了您的权益,请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容,谢谢合作!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x

举报 回复