写一个webworker的demo,适合初学者懂的
时间: 2024-02-27 15:57:33 浏览: 30
好的,以下是一个简单的Web Worker的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Web Worker Demo</title>
</head>
<body>
<p>计算一个数的阶乘:</p>
<input type="number" id="number" min="0" value="0">
<button onclick="calculate()">计算</button>
<p id="result"></p>
<script>
function calculate() {
// 获取输入的数值
var n = document.getElementById("number").value;
// 创建一个新的Web Worker
var worker = new Worker("worker.js");
// 发送数据给Web Worker
worker.postMessage(n);
// 接收Web Worker返回的结果
worker.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
}
</script>
</body>
</html>
```
在上面的代码中,我们创建了一个简单的输入框和一个按钮。当用户点击按钮时,我们将输入的数值发送给一个Web Worker,并在Web Worker中计算阶乘。最后,Web Worker将计算结果发送回主线程,并在页面上显示出来。
下面是我们在`worker.js`中实现的代码:
```javascript
// 接收从主线程传递过来的数据
onmessage = function(event) {
var n = event.data;
// 计算阶乘
var result = 1;
for (var i = 1; i <= n; i++) {
result *= i;
}
// 将结果发送回主线程
postMessage(result);
};
```
在上面的代码中,我们定义了一个`onmessage`事件处理程序,它接收从主线程传递过来的数据。然后,我们在Web Worker中计算阶乘,并使用`postMessage`方法将结果发送回主线程。
这就是一个简单的Web Worker的示例。它演示了如何在Web Worker中执行一些计算密集型的任务,并将结果发送回主线程。希望这能帮助你了解Web Worker的基本用法。