您现在的位置： Linux教程網 >> UnixLinux > >> Linux編程 >> Linux編程

HTML5之Worker用法

HTML5提供了Worker類用於多線程處理。Worker是在UI主線程中創建，後台執行的一段js腳本，它通過消息與UI線程傳遞數據。使用Worker就3步：

cheungmine 2011-11-29

第1步：創建一個Worker，需要指定一個js文件，作為Worker線程的執行體：

var worker = new Worker("worker.js");

第2步：給Worker實例指定消息處理函數，只有2個：onmessage ，onerror
    worker.onmessage = function (event) {
        // update UI here
        var t1 = new Date().getTime();
        elemById("_time").value = t1 - t0;
        elemById("_piValue").value = event.data;
    };

    worker.onerror = function (event) {
        alert(event.message);
    };

第3步：給worker發消息：postMessage。

    elemById("_time").value = "-";
    t0 = new Date().getTime();
    worker.postMessage(parseInt(elemById("_num_rects").value));

下面以一個具體的例子來說明Worker的用法。這個例子是用數值積分的方法求pi=(3.1415926....）的。worker.js就是做這個工作。

// worker.js
// calculate pi using numerical integration
// 2011-11, cheungmine
self.onmessage = function (event) {
// numerical integration to calc pi
var num_rects = event.data;
var width = 1.0/num_rects;
var mid;
var height;
var sum = 0.0;
var area;
for (var i=0; i<num_rects; i++) {
mid = (i+0.5) * width;
height = 4.0/(1.0+mid*mid);
sum += height;
}
area = width*sum; // area=pi
// post message back to UI thread
self.postMessage(area);
};

HTML5主頁面js-test.html如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js-test.html</title>
<script type="text/javascript">
function elemById(id) {
return document.getElementById(id);
}
function getBrowserAgent() {
var browser = "$";
if ((navigator.userAgent.indexOf('MSIE') >= 0) &&
(navigator.userAgent.indexOf('Opera') < 0)){
browser = "$IE";
}
else if (navigator.userAgent.indexOf('Firefox') >= 0){
browser = "$FIREFOX";
}
else if (navigator.userAgent.indexOf('Opera') >= 0){
browser = "$OPERA";
}
else if (navigator.userAgent.indexOf('Chrome') >= 0){
browser = "$CHROME";
}
return browser;
}
var browser = getBrowserAgent();
window.addEventListener('load',
function () {
if (browser=="$IE") {
// MSIE
if (window.confirm("IE does not support HTML5 currently.\n"+
"please use lastest FireFox, Chrome or Opera!\n"+
"if you havenot any of them installed,\n"+
"please click OK to enter download page.")) {
window.location.replace("selbrowser.html");
}
else {
window.close();
}
}
else if (browser=="$FIREFOX"||browser=="$CHROME") {
// do stuff for FireFox and Chrome
}
else {
// do stuff for others
}
initPage();
},
false
);
var dt = new Date();
var t0 = 0;
function initPage () {
// onclick
elemById("_piWorker").addEventListener('click',
function(){
var worker = new Worker("worker.js");
worker.onmessage = function (event) {
// update UI here
var t1 = new Date().getTime();
elemById("_time").value = t1 - t0;
elemById("_piValue").value = event.data;
};
worker.onerror = function (event) {
alert(event.message);
};
elemById("_time").value = "-";
t0 = new Date().getTime();
worker.postMessage(parseInt(elemById("_num_rects").value));
},
false
);
}
</script>
</head>
<body>
<p>Press button "calc" to get pi</p>
<p>
<input type="input" size="10" id="_num_rects" value="100000000">
<input type="button" id="_piWorker" value="calc">
pi=<input type="input" size="30" id="_piValue" value="">
time elapsed: <input type="input" size="10" id="_time" value="-">
</p>
</body>
</html>

上一篇文章： HTML5之鼠標拖動圖片
下一篇文章： HTML5使用canvas畫圖時，圖片被自動放大模糊的問題.....

Linux編程