HTML5之Worker

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


转载于:https://www.cnblogs.com/puncha/archive/2012/12/15/3877017.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值