webウォーカー
9074 ワード
Browser
IE
Edge
FireFox
Chrome
Safari
version
10+
12+
3.5+
4+
4+
document、windowなどのオブジェクトを取得することもできないが、navigator、location( )、XMLHttpRequest、setTimeout などのブラウザAPIを取得することができる.alert()方法とconfirm()方法を実行できませんが、XMLtHttpRequestオブジェクトを使用してAJAX要求を発行することができます.//
var myWorker = new Worker(jsUrl, options);
myworker ：
// Worker
if ( typeof ( Worker ) === 'undefined')
document.writeln(' Sorry! No Web Worker support.. ')
else {
// worker
let worker = new Worker('webWork.js', { name : 'worker' });
//
worker.postMessage('Hello World');
// worker.postMessage({method: 'echo', args: ['Work']});
//
worker.onmessage = function (event) {
console.log('Received message ' + event.data);
doSomething();
}
function doSomething() {
//
worker.postMessage('Work done!');
//
worker.terminate();
}
// myworker
let myworker = new Worker('webWork2.js', { name : 'myworker' });
// myworker
myworker.onmessage = (e) => {
document.getElementById("app").innerHTML = e.data
}
// mywork
function stopWorker () {
myworker.postMessage('stop');
// myworker ， 。
myworker.terminate();
}
}
// webWork.js
console.log(self.name,'webWork.js');
// self ， 。
// //
// self.addEventListener('message', function (e) {
// console.log(e.data,'data')
// self.postMessage('You said: ' + e.data);
// }, false);
// onmessage
self.onmessage = (e) => {
console.log(e.data,'e')
self.postMessage('You said: ' + e.data);
if (e.data == 'Work done!') {
self.close();
}
}
// webWork2.js
console.log(self.name,'webWork2.js');
//
let i = 1;
function add () {
i ++;
self.postMessage(i);
setTimeout(add, 1000);
}
add();
//
self.onmessage = (e) => {
if (e.data == 'stop') {
self.close();
}
}
file://があります.//
importScripts('script1.js');
//
importScripts('script1.js', 'script2.js');
importScripts()イベントをトリガする. worker.onerror(function (event) {
console.log([
'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
].join(''));
});
//
worker.addEventListener('error', function (event) {
// ...
});
error事件を傍受することができる.//
worker.terminate();
// Worker
self.close();
// Transferable Objects
worker.postMessage(arrayBuffer, [arrayBuffer]);
//
var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);
error:メインラインからワーカースレッドにメッセージを送る.メッセージは、バイナリデータworker.postMessage:メインスレッドがワーカースレッドを閉じるworker.terminate:ワーカースレッドがメッセージを送るときのコールバックを指定しても良いし、worker.onmessageの方式でworker.addEventListener('message',cb):ワーカースレッドにエラーが発生した場合のコールバックを指定しても良いし、worker.onerror worker.addEventListener('error',cb):ワーカースレッドからメインラインのプログラムにメッセージを送信し、メッセージは、バイナリデータself.postMessage:ウォーカースレッドが自分を閉じているself.close:メインラインプログラムがワーカースレッドメッセージを送信する場合のコールバックを指定しても良いし、self.onmessage self.addEventListener('message',cb):ワーカースレッドにエラーが発生した場合のコールバックを指定しても良いし、self.onerror function createWorker(f) {
var blob = new Blob(['(' + f.toString() +')()']);
var url = window.URL.createObjectURL(blob);
var worker = new Worker(url);
return worker;
}
var pollingWorker = createWorker(function (e) {
var cache;
function compare(new, old) { ... };
setInterval(function () {
fetch('/my-api-endpoint').then(function (res) {
var data = res.json();
if (!compare(data, cache)) {
cache = data;
self.postMessage(data);
}
})
}, 1000)
});
pollingWorker.onmessage = function () {
// render data
}
pollingWorker.postMessage('init');
//
let w = new Worker("js/workers.js");
w.onmessage =
function (event) {
var img = document.createElement("img");
img.src = window.URL.createObjectURL(event.data);
document.querySelector('#result').appendChild(img);
};
// worker
let arr = [... ];
for (let i = 0, len = arr.length; i < len; i++) {
let req = new XMLHttpRequest();
req.open('GET', arr[i], true);
req.responseType = "blob";
req.setRequestHeader("client_type", "DESKTOP_WEB");
req.onreadystatechange = () => {
if (req.readyState == 4) {
postMessage(req.response);
}
};
req.send(null);
}