webworker
webwork 사용해보기
mdn web worker
1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./app.js" defer></script>
</head>
<body>
<button id="btn"> 눌러보세요</button>
<div id="result"></div>
</body>
</html>- app.js
document.querySelector('#btn').addEventListener('click', function () {
var worker = new Worker('./worker.js');
worker.addEventListener('message', function(e) {
var div = document.createElement('div');
div.textContent = e.data;
console.log(e.data)
document.querySelector('#result').appendChild(div);
worker.terminate();
});
worker.postMessage('work');
});- worker.js
function sleep(delay) {
var start = new Date().getTime();
while (new Date().getTime() < start + delay);
}
self.addEventListener('message', function(e) {
console.log(e.data); // 일해라 워커!
if(e.data === "work"){
sleep(3000); // 3초가 걸림을 표현
self.postMessage("send my message");
}
});
Author And Source
이 문제에 관하여(webworker), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jgi0105/webworker저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
