Task.start()方法和$await()方法执行的结果不同

[Ericpoon_智]

<script src="script/jscex.bundle.js" type="text/javascript"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <script src="script/jquery-bindings.js" type="text/javascript"></script>

    <script type="text/javascript">

        var dataList = [];

        function getData1() {            

            $.getJSON("Data1handler.ashx?t="+new Date().getTime(), function(data) {

                dataList.push(data);

            });

        }

        var getData1Asnyc = eval(Jscex.compile("async", function() {

            $await(getData1());

        }));

        function getDBData() {

            $.getJSON("DBHandler.ashx?t=" + new Date().getTime(), function(data) {

                dataList.push(data);

            });

        }

        var getDBDataAsnyc = eval(Jscex.compile("async", function() {

            $await(getDBData());

        }));

        var t = eval(Jscex.compile("async", function() {

            dataList = [];

            t1 = getData1Asnyc();

            t2 = getDBDataAsnyc();

            t2.start();

            t1.start(); //这里

            $await(Jscex.Async.sleep(500));//这里

            

            $.each(dataList, function(i, d) {

                if (d.length != undefined) {

                    $(".show").append("<hr/>");

                    $.each(d, function(ii, dd) {

                        $(".show").append("<p>ID=" + dd.ID + ",Name=" + dd.Name + "</p>");

                    });

                } else {

                    $(".show").append("<hr/>");

                    $(".show").append("<p>Name=" + d.Name + "</p>");

                }

            });

        }));

        

        $("#b1").live("click", function() {

            t().start();

//            getData1();

//            getDBData();

//            $.each(dataList, function(i, d) {

//                if (d.length != undefined) {

//                    $(".show").append("<hr/>");

//                    $.each(d, function(ii, dd) {

//                        $(".show").append("<p>ID=" + dd.ID + ",Name=" + dd.Name + "</p>");

//                    });

//                } else {

//                    $(".show").append("<hr/>");

//                    $(".show").append("<p>Name=" + d.Name + "</p>");

//                }

//            });

        });

    </script>

这代码在点击按钮后，可正常加载两个AJAX请求，并显示数据在<span class="show"></span> 中。

可是将

t1.start()

$await(Jscex.Async.sleep(500));

这两句改为：

$await( getData1Async());

后，数据能正常加载，但往后显示的代码就不能将dataList里面的两个对象进行遍历显示在 <span class="show"></span> 中了。

[Jeffrey Zhao]

既然getData1()是这样的：

 

function getData1() {

    $.getJSON("Data1handler.ashx?t="+new Date().getTime(), function(data) {

        dataList.push(data);

    });

}

 

那么getData1Async这么写就是没有意义的：

 

var getData1Asnyc = eval(Jscex.compile("async", function() {

    $await(getData1());

}));

 

因为$await的东西应该是个Jscex里的Task对象，你这里getData1()不返回任何东西，于是会出错，你的console里应该会有错误输出。

 

我看了你的代码，感觉你还是没理解Jscex的使用方式，按理说你应该写出类似这样的代码：

 

var t = eval(Jscex.compile("async", function() {

    dataList = [];

 

    // 当然这里的两个Async方法不是你现在这么实现的。

    $await(getData1Asnyc());

    $await(getDBDataAsnyc());

   

    $.each(dataList, function(i, d) {

        if (d.length != undefined) {

            $(".show").append("<hr/>");

            $.each(d, function(ii, dd) {

                $(".show").append("<p>ID=" + dd.ID + ",Name=" + dd.Name + "</p>");

            });

        } else {

            $(".show").append("<hr/>");

            $(".show").append("<p>Name=" + d.Name + "</p>");

        }

    });

}));

 

很少有情况需要手动执行start的。

 

Jeffrey Zhao
Blog: http://blog.zhaojie.me/
Twitter: @jeffz_cn (Chinese) | @jeffz_en (English)

[Ericpoon_智]

var getData1Asnyc = eval(Jscex.compile("async", function() {

    $await(getData1());

}));

这样不是可以直接将原来的调用变成一个Task，然后将多个Task完成后再一并处理结果集吗？

原因是查看过结果jQuery Bundle后的写ajax请求，需要改动所有原来的获取数据的方法。

[Jeffrey Zhao]

不是这么封装的，而且getData1没法封装一个Jscex方法，因为我们根本没法知道它什么时候结束。

 

当然你可以重新写一个getData1Async，例如：

 

var getData1Async = function () {

    return Task.create(function (t) {

        $.getJSON("Data1handler.ashx?t="+new Date().getTime(), function(data) {

            dataList.push(data);

            t.complete("success");

        });

    });

}

 

如何将一个异步方法绑定为Jscex异步方法可以参考文档：

 

https://github.com/JeffreyZhao/jscex/blob/master/doc/async/README-cn.md

[Ericpoon_智]

明白。

另外，我又测试了尝试将原来的异常函数改为：

引入：script/jquery-bindings.js

var getData1Asnyc = eval(Jscex.compile("async", function() {

            //$await(getData1());

            var result = $await($.ajaxAsync({

                "url": "Data1handler.ashx?t=" + new Date().getTime()

            , "dataType": "json"

            , success: function(data) {

                dataList.push(data);

            }

            }));

            dataList.push(result.data);

        }));

这样按钮触发的函数能正常执行，且console里面没有异常记录。这个跟Task.create() 来创建有什么不同呢请问。

[Jeffrey Zhao]

建议还是看一下文档吧，从头到尾只有这一篇而已。