使用jQuery queue(队列) 遇到的问题及解决方案

应用场景描述：

我现在要做文章列表的批量生成，使用AJAX将生成的进度情况展示给用户。首先要生成文章列表页，然后在生文章内容详细页。

假如有10页每页10条记录，就会10个文章列表页 + 总录数（100条记录） ＝ 110个页面，也就是说这次要生成110个静态页面。

为了使用页面生成展示给用户的界面更生动，让用户了解系统就在生成哪个页，及完成情况，我使用了jquery 的queue 及dequeue方法

下面是有问题的代码：（这些代码仅生列表，不包括生详细内容部分）

$.ajaxjsonext('run.ashx', 'action=articlepagecount&navbarid=' + navid, function (msg) { 
      $('#w').data("pagecount", msg); //存放总页数
      var _fun = []; //空的数组，此处保存将要按序执行的AJAX请求代码
      BuildArticleListFunction(_fun,navid); //将要执行的AJAX请求封装成函数存入数组中。navid 为栏目ID
      
      $('#detail').append('准备数据完成。<br>');
      $('#detail').append('文章列表共 ' + $('#w').data("pagecount")+ ' <br>');
 
      $(document).queue('ajax_article', _fun); //
      var _takeOne = function () {
            $(document).dequeue('ajax_article');
      }; 
      _takeOne(); //执行队列中的AJAX请求函数
});

function BuildArticleListFunction(arrfun,navid) {
    pagecount = $('#w').data("pagecount");
 
   for(var i=1;i<=pagecount;i++){
        arrfun.push(function () {
            //文章列表
            $.ajaxjsonext('run.ashx', 'action=articlelist&navbarid=' + navid + '&pageindex=' + (i), function (state) {
                if (state.success) {
                    $('#detail').append(state.fn + ' 创建成功。<br />');
                    $('#fn').text('状态：' + state.fn + ' 创建成功。');
                    var w = (n * 100 / pagecount.length) + '%';
                    alert(w);
                    $('.statusbar').width(w).children('span').text(w);
                }
                $(document).dequeue('ajax_article');
            });
        });
    });
}


这段代码看起来似乎没有什么问题，但生成的只有最后一页，总之就是不能生成所有列表页 ，问题出在上述代码中的 i，
每一次循环添加push到数组中i是一样的值，尽管请求的次数一样，但同时请求的参数也一样，这就造成了上述的情况。

解决问题的方法：
后台处理生总页数的时候不直接返回数字，返回一个数组。如下代码：

public string getpagecount()
{
　　int i=10; //此处可以通过数据获取总记录数，在根据每页记录数计算得出总页数。
　　StringBuilder sb = new StringBuilder();
      sb.Append("[");
      int j = 1;
      while (j<=i)
     {
           sb.Append(j.ToString() + ",");
           j++;
     }
     sb.Remove(sb.Length - 1, 1).Append(']');
     return sb.ToString();
}




这样js代码就得改了


function BuildStart(modeltype,navid) {
            $.getJSON('run.ashx', 'action=articlepagecount&navbarid=' + navid, function (msg) { 
                $('#w').data("pagecount", msg);
                var _fun = [];
                BuildArticleListFunction(_fun,navid);
                alert(_fun.length);
                $('#detail').append('准备数据完成。<br>');
                $('#detail').append('文章列表共 ' + $('#w').data("pagecount").length + ' <br>');

                $(document).queue('ajax_article', _fun);
                var _takeOne = function () {
                    $(document).dequeue('ajax_article');
                };

                _takeOne();
            });

}

function BuildArticleListFunction(arrfun,navid) {
    pagecount = $('#w').data("pagecount");
    $.each(pagecount, function (i, n) {
        arrfun.push(function () {
            //文章列表
            $.getJSON('run.ashx', 'action=articlelist&navbarid=' + navid + '&pageindex=' + (n), function (state) {
                if (state.success) {
                    $('#detail').append(state.fn + ' 创建成功。<br />');
                    $('#fn').text('状态：' + state.fn + ' 创建成功。');
                    var w = (n * 100 / pagecount.length) + '%';
                    alert(w);
                    $('.statusbar').width(w).children('span').text(w);
                }
                $(document).dequeue('ajax_article');
            });
        });
    });
}



问题解决了，但始终想不明白为什么，这到底是怎么回子事呀。头大了。。
盼高手解惑!!!!!