欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML5 Web Worker(多線程處理)

  發(fā)布時(shí)間：2023-01-12 16:23:18   作者：xiangxiongfly915   我要評論
在HTML5中，可以使用Web Worker創(chuàng)建一個(gè)后臺(tái)線程執(zhí)行一個(gè)耗時(shí)任務(wù)，本文主要介紹了HTML5 Web Worker(多線程處理)，感興趣的可以了解一下

 概述

JavaScript的執(zhí)行環(huán)境是單線程的，也就是一次只能執(zhí)行一個(gè)任務(wù)。如果遇到多個(gè)任務(wù)時(shí)，只能排隊(duì)依次執(zhí)行。

在HTML5中，可以使用Web Worker創(chuàng)建一個(gè)后臺(tái)線程執(zhí)行一個(gè)耗時(shí)任務(wù)，而不會(huì)影響頁面響應(yīng)。

簡單使用

Web Worker技術(shù)基本原理就是：在當(dāng)前JavaScript的主線程中，使用Worker()構(gòu)造函數(shù)新建一個(gè)worker實(shí)例，然后加載某一個(gè)JavaScript文件，發(fā)送給一個(gè)后臺(tái)線程來處理（注意，這里是后臺(tái)線程）。

worker.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			//創(chuàng)建worker
			var worker = new Worker("worker.js");
			//向后臺(tái)線程發(fā)送數(shù)據(jù)
			worker.postMessage("hello world");
			//監(jiān)聽后臺(tái)線程返回的數(shù)據(jù)
			worker.onmessage = function(e) {
				console.log("前臺(tái)線程收到：" + e.data);
			};
		</script>
	</head>
	<body>
	</body>
</html>

worker.js

onmessage = function(e) {
	//接收前臺(tái)發(fā)來的數(shù)據(jù)
	var d = e.data;
	console.log("后臺(tái)線程收到：" + d);
	var str = d.split("").reverse().join("");
	postMessage(str);
};

在這里插入圖片描述

處理復(fù)雜數(shù)據(jù)

worker.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
			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("前臺(tái)接收：" + e.data);
					}
				}
				stop.onclick = function() {
					worker.terminate();
				}
			}
		</script>
	</head>
	<body>
		<button id="start">開始</button>
		<button id="stop">停止</button>
	</body>
</html>

worker.js

var i = 0;

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

到此這篇關(guān)于HTML5 Web Worker(多線程處理)的文章就介紹到這了,更多相關(guān)HTML5 Web Worker內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論