-3
私はウェブワーカーの使用と利点と混同しています。私は2つのカウンターを開始する2つのボタンを作成することができ、両方のカウンターの値が画面に表示されます。また、私はアニメーションを作成するためにボールの動きを作成しました。コードは次のとおりです。複数のプロセスがスムーズに動作しているので、なぜjavascriptでWebワーカーが必要ですか？
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes ballmovement {
0% {
left: 0px;
top: 0px;
background-color: yellow;
}
33% {
margin-left: 100px;
margin-top: 160px;
}
66% {
margin-left: 200px;
margin-top: 0px;
}
100% {
margin-left: 300px;
margin-top: 160px;
background-color: purple;
}
}
.animate {
animation-name: ballmovement;
animation-duration: 3s;
animation-iteration-count: 40;
animation-direction: alternate;
}
#ball {
width: 100px;
height: 100px;
border-width: 2px;
border-color: black;
border-style: solid;
border-radius: 50%;
}
#container {
float: left;
height: 500px;
width: 50%;
}
#bus {
display: inline;
}
</style>
<script>
function startWorker1() {
i = 0;
timedCount1();
}
function startWorker2() {
j = 0;
timedCount2();
}
function timedCount1() {
i = i + 1;
document.getElementById("result1").innerHTML = i;
setTimeout("timedCount1()", 500);
}
function timedCount2() {
j = j + 1;
document.getElementById("result2").innerHTML = j;
setTimeout("timedCount2()", 500);
}
function stopWorker() {
w.terminate();
w = undefined;
}
</script>
</head>
<body>
<div id="container">
<div id="ball" class="animate"></div>
</div>
<div id="bus">
<button onclick="startWorker1()">Start Worker 1</button>
<button onclick="startWorker2()">Start Worker 2</button>
<button onclick="stopWorker()">Stop Worker</button>
<div id="result1"></div>
<div id="result2"></div>
</div>
</body>
</html>
コードは本当にスムーズに機能し、プロセスは他のプロセスを妨害しませんでした。
上記のコードで3つのプロセスを並行して作成しているので、なぜWebワーカーが必要ですか？
がある重い計算を行うためにのようにではなく、技術的な「プロセス」を「必要なものが起こってします」 UI関連ではない？ –
Webワーカーは、Webワーカーが必要なコードに便利です –
あなたは非同期setTimeout関数を使用しています。あなたのコードには実際にはWebワーカーはありません。 Webワーカーはバックグラウンドで動作し、DOMにアクセスすることはできません。続きを読む - [Webワーカーを使用する]（https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers） – ThisClark