• 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);
    };


  • 相关阅读:
    转:Nginx 日志文件切割
    nginx日志切割
    nginx日志配置
    Mongodb数据更新命令
    Android开发书籍推荐
    全面解读python web 程序的9种部署方式
    PowerDesinger15设置字体大小
    A* Pathfinding Project (Unity A*寻路插件) 使用教程
    jQuery的DOM操作之捕获和设置
    如何写一个好的方法
  • 原文地址:https://www.cnblogs.com/puncha/p/3877017.html
Copyright © 2020-2023  润新知