IT俱乐部 HTML5 HTML5 Web Worker(多线程处理)

HTML5 Web Worker(多线程处理)

 概述

JavaScript的执行环境是单线程的,也就是一次只能执行一个任务。如果遇到多个任务时,只能排队依次执行。

在HTML5中,可以使用Web Worker创建一个后台线程执行一个耗时任务,而不会影响页面响应。

简单使用

Web Worker技术基本原理就是:在当前JavaScript的主线程中,使用Worker()构造函数新建一个worker实例,然后加载某一个JavaScript文件,发送给一个后台线程来处理(注意,这里是后台线程)。

worker.html



	
		
			//创建worker
			var worker = new Worker("worker.js");
			//向后台线程发送数据
			worker.postMessage("hello world");
			//监听后台线程返回的数据
			worker.onmessage = function(e) {
				console.log("前台线程收到:" + e.data);
			};
		

worker.js

onmessage = function(e) {
	//接收前台发来的数据
	var d = e.data;
	console.log("后台线程收到:" + d);
	var str = d.split("").reverse().join("");
	postMessage(str);
};

处理复杂数据

worker.html



	
		
			var worker;
			window.onload = function() {
				var start = document.getElementById("start");
				var stop = document.getElementById("stop");
				start.onclick = function() {
					worker = new Worker("worker.js")
					worker.onmessage = function(e) {
						console.log("前台接收:" + e.data);
					}
				}
				stop.onclick = function() {
					worker.terminate();
				}
			}
		
		
	

worker.js

var i = 0;

function handleTask() {
	i++;
	console.log("handle:" | i);
	postMessage(i);
}
setInterval(handleTask, 1000); 

到此这篇关于HTML5 Web Worker(多线程处理)的文章就介绍到这了,更多相关HTML5 Web Worker内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章,希望大家以后多多支持IT俱乐部!

本文收集自网络,不代表IT俱乐部立场,转载请注明出处。https://www.2it.club/navsub/html5/5414.html
上一篇
下一篇
联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部