在这里的案例是我使用worker进行UI界面的改变
众所周知,如果在JS代码在进行运算中去改变页面的UI显示的数据,只能等到JS代码计算完毕后才能进行更换UI界面,然而worker就是处理这种的,例如下面的demo,当我点击按钮会在js计算的过程中页面输出一个456,这里我判断的是索引为10的时候去改变UI,代表确实是在JS进程中了,当计算完毕后在控制台打印结果,正常情况下只能等结果打印出的瞬间才能更改UI数据,这里就能在不等计算结束直接渲染UI,好了,话不多说,直接看下面demo,运行demo即可
在一个html文件内
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Worker Example</title>
</head>
<body>
<div id="output">123</div>
<button onclick="startCalculation()">Start Calculation</button>
<script>
// 定义一个函数，用于启动计算
function startCalculation() {
// 创建一个新的 Worker 对象
const worker = new Worker(URL.createObjectURL(new Blob([`(${workerCode.toString()})()`], {type: 'application/javascript'})));
// 监听来自 Worker 的消息
worker.onmessage = function(event) {
// 当收到消息时，更新页面输出
document.getElementById('output').innerText = event.data;
};
// 向 Worker 发送消息，开始计算
worker.postMessage('start');
}
// 定义 Web Worker 内部的计算函数
function workerCode() {
// 监听来自主线程的消息
onmessage = function(event) {
if (event.data === 'start') {
// 开始复杂的计算逻辑
console.log('Starting complex calculation...')
let result = 0
for (let i = 0; i < 1000000000; i++) {
if (i === 10) {
// 当满足条件时，发送消息到主线程
postMessage('456');
}
result += Math.sqrt(i)
}
console.log('Complex calculation result:', result)
}
};
}
</script>
</body>
</html>
分开html和js文件
html文件代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Render and Continue Calculation Example</title>
</head>
<body>
<div id="output">123</div>
<button onclick="startCalculation()">Start Calculation</button>
<script>
function startCalculation() {
// 创建一个新的Web Worker
const worker = new Worker('worker.js'); // 这里是引用的js路径
// 接收来自Web Worker的消息
worker.onmessage = function (e) {
document.getElementById('output').innerText = e.data;
};
// 向Web Worker发送消息
worker.postMessage('start');
}
</script>
</body>
</html>
worker.js代码
// worker.js
// 监听来自主线程的消息
onmessage = function (e) {
if (e.data === 'start') {
console.log('Starting complex calculation...')
let result = 0
for (let i = 0; i < 1000000000; i++) {
if (i === 10) {
// 发送计算结果到主线程
postMessage('456')
}
result += Math.sqrt(i)
}
console.log('Complex calculation result:', result)
}
}
