HTML5/webworker.html at master · j2woo/HTML5 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹 워커</title>
</head>
<body>
    <h1>Web Worker</h1>
    숫자 입력<input type="number" id="num"/>
    <button id="start">합계 구하기</button>

    <script>
        let num=document.getElementById("num");
        let start=document.getElementById("start");

        let worker;
        start.addEventListener("click", ()=>{
            //워커가 만들어져 있으면 중지
          if(worker)
          {
            worker.terminate();
          }
          // 워커 생성
          worker = new Worker("worker.js");
          // 메세지 전송
          worker.postMessage(Number(num.value));
          //워커가 결과를 전송했을 때
          worker.onmessage=(event)=>{
            alert("합계: "+ event.data);
          }
        });
    </script>
</body>
</html>