今天尝试了下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); };