65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 Humax 进行异步 JavaScript 编程

M Sheik Uduman Ali
emptyStarIconemptyStarIconemptyStarIconemptyStarIconemptyStarIcon

0/5 (0投票)

2008年3月22日

LGPL3

2分钟阅读

viewsIcon

23591

downloadIcon

63

本文解释了如何使用Humax框架0.2.1版本在JavaScript中使用异步方法调用模式。

在 http://humax.sourceforge.net 下载Humax v0.2.1，获取API参考和大量教程。

先决条件

引言

异步操作通常用于执行长时间运行的任务和那些不期望在当前执行路径中运行的任务。例如，你的程序通过点击一个按钮在UI的不同部分渲染两个数据密集型网格。假设你应该立即显示关于该操作的简短消息。在这种情况下，你可以使用异步模式进行网格渲染部分。

Humax在0.2.1版本中引入了异步编程模式。它使用Humax委托与JavaScript的setTimeout方法相关联。

需要一个委托（可以是单播委托或多播委托）来异步调用一个方法。不是在委托中调用invoke，而是使用beginInvoke来异步调用一个方法。除了作为你想要异步调用的方法的参数之外，它还有一个额外的参数（应该排在第一个位置），它引用了回调方法。

一旦异步调用完成执行，回调就会执行。

AsyncResult

回调方法应该只有一个AsyncResult类型的参数。它具有以下方法

  • getResult()。返回异步方法的结果，即返回值。
  • getSource()。返回异步方法执行自哪个对象。

示例

让我们创建一个html页面，它给出斐波那契数列的第“n”个值。它提供一个文本框和一个按钮。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>Humax Asynchronous Programming</title>
        <script type="text/javascript" src="humax.js"></script>
        <script type="text/javascript">                    
            Humax.require("asyncScript");
        </script>
    </head>
    <body>
        <div>Enter a number to get fibonacci number at this place: <input type="text" id="fibText" />
        <input type="button" id="getButton" onclick="getButton_onclick()" value="Get" /></div>
        <div id="output">Output</div>
    </body>
</html>

在上面的代码中，需要一个包“asyncScript”。它包含“Fibonacci”类的定义。以及事件处理程序方法“getButton_onclick()”。

HxTest.Fibonacci = function()
{        
    this.AsyncFibonacci = new Humax.MulticastDelegate("AsyncFibonacci", Function("n",""));
    this.AsyncFibonacci.addTarget(this.getValueAt, this);
}

HxTest.Fibonacci.prototype = 
{        
    getValueAt : function(n)
    {
        if(isNaN(n)) return -1;
        if(n <= 2) return n-1;
        else
        {            
            var nthvalue = 0;
            var n1 = 0;
            var n2 = 1;
            
            for(var i = 3; i <= n; i++)
            {
                nthvalue = n1 + n2;
                n1 = n2;
                n2 = nthvalue;
            }
            
            return nthvalue;
        }
    }    
}

Fibonacci类型包含一个方法“getValueAt”，它接收“n”作为输入，并返回斐波那契数列的第“n”个值。请注意，构造函数定义了一个多播委托，在其上注册了getValueAt。

function getButton_onclick()
{
    var fib = new HxTest.Fibonacci();
    fib.AsyncFibonacci.beginInvoke(fibCallback, parseInt(document.getElementById("fibText").value));
    document.getElementById("output").innerHTML = "Calculating...";    
}

getButton的onclick事件处理程序创建了HxTest.Fibonacci的新实例并异步调用AsyncFibonacci。为了获取第“n”个值，它声明了fibCallback作为回调方法。请注意，下一段代码只是在“output”div中显示“Calculating...”作为消息。

function fibCallback(asyncResult)
{
    document.getElementById("output").innerHTML = asyncResult.getResult();
}

fibCallback方法接收Humax.AsyncResult的实例作为参数。Humax将方法的结果和对象源分配给该实例。

通过beginInvoke，现在你可以获取一个或多个方法的返回值，这些方法已添加到Humax.MulticastDelegate中。

请注意，你可以通过设置Humax.AppConfig.asyncInvokeDelayTime来设置异步调用的延迟时间。系统默认值为100毫秒。

有关 Humax Web 框架的更多详细信息或您的贡献，请访问 http://humax.sourceforge.net 或
写信给我 udooz@hotmail.com。

© . All rights reserved.