今天尝试了下HTML5的Worker,还蛮简单的,有几点要注意:
1)message事件的信息是储存在event.data里面的,可以任何类型,字符串啊,对象啊
2)worker里面是不能执行alert或者console.log的。
3)Firebug和IE9都无法调试worker,很无奈,不过最新的IE10可能可以。
下面是代码,这个程序会让calc.js的worker异步的执行表达式求值。
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Async calculator</title>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script src="app.js" charset="utf-8" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// Activate Web Worker
var worker = new Worker("calc.js");
worker.addEventListener("message", function (event) {
alert(event.data);
});
var formulaCache = {};
var formulaCallbackCache = {};
$("#btnCalc").click(function () {
var formula = $("#txtFormula")[0].value.toString();
if (formula in formulaCache) {
// this formula is already calculated,
// return the value directly.
callback(formula, formulaCache[formula]);
}
else if (formula in formulaCallbackCache) {
// this is not calcuated yet,
// users have to wait.
}
else {
// do it!
worker.postMessage(formula);
// mark it in progress
formulaCallbackCache[formula] = true;
}
return false;
});
});
</script>
</head>
<body>
<p class="title">
Async Calculator
</p>
<div>
<input id="txtFormula" type="text" />
</div>
<div>
<input id="btnCalc" type="button" value="Calculate" />
</div>
</body>
</html>
Calc.js
// Worker: notice no alert, no console, supported.
//
this.onmessage = function (event) {
var formula = event.data;
setTimeout(function () {
postMessage(eval(formula));
}
, 10000);
};