應(yīng)用場景描述：

我現(xiàn)在要做文章列表的批量生成，使用AJAX將生成的進(jìn)度情況展示給用戶。首先要生成文章列表頁，然后在生文章內(nèi)容詳細(xì)頁。

假如有10頁每頁10條記錄，就會10個文章列表頁 + 總錄數(shù)（100條記錄） ＝ 110個頁面，也就是說這次要生成110個靜態(tài)頁面。

為了使用頁面生成展示給用戶的界面更生動，讓用戶了解系統(tǒng)就在生成哪個頁，及完成情況，我使用了jquery 的queue 及dequeue方法

下面是有問題的代碼：（這些代碼僅生列表，不包括生詳細(xì)內(nèi)容部分）

$.ajaxjsonext('run.ashx', 'action=articlepagecount&navbarid=' + navid, function (msg) { $('#w').data("pagecount", msg); //存放總頁數(shù)var _fun = []; //空的數(shù)組，此處保存將要按序執(zhí)行的AJAX請求代碼BuildArticleListFunction(_fun,navid); //將要執(zhí)行的AJAX請求封裝成函數(shù)存入數(shù)組中。navid 為欄目ID$('#detail').append('準(zhǔn)備數(shù)據(jù)完成。<br>');$('#detail').append('文章列表共 ' + $('#w').data("pagecount")+ ' <br>');$(document).queue('ajax_article', _fun); //var _takeOne = function () {$(document).dequeue('ajax_article');}; _takeOne(); //執(zhí)行隊(duì)列中的AJAX請求函數(shù) });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 + ' 創(chuàng)建成功。<br />');$('#fn').text('狀態(tài)：' + state.fn + ' 創(chuàng)建成功。');var w = (n * 100 / pagecount.length) + '%';alert(w);$('.statusbar').width(w).children('span').text(w);}$(document).dequeue('ajax_article');});});}); } 這段代碼看起來似乎沒有什么問題，但生成的只有最后一頁，總之就是不能生成所有列表頁 ，問題出在上述代碼中的 i，
每一次循環(huán)添加push到數(shù)組中i是一樣的值，盡管請求的次數(shù)一樣，但同時請求的參數(shù)也一樣，這就造成了上述的情況。

解決問題的方法：
后臺處理生總頁數(shù)的時候不直接返回?cái)?shù)字，返回一個數(shù)組。如下代碼：

public string getpagecount() {
　　int i=10; //此處可以通過數(shù)據(jù)獲取總記錄數(shù)，在根據(jù)每頁記錄數(shù)計(jì)算得出總頁數(shù)。
　　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('準(zhǔn)備數(shù)據(jù)完成。<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 + ' 創(chuàng)建成功。<br />');$('#fn').text('狀態(tài)：' + state.fn + ' 創(chuàng)建成功。');var w = (n * 100 / pagecount.length) + '%';alert(w);$('.statusbar').width(w).children('span').text(w);}$(document).dequeue('ajax_article');});});}); }
問題解決了，但始終想不明白為什么，這到底是怎么回子事呀。頭大了。。 盼高手解惑!!!!!

轉(zhuǎn)載于:https://www.cnblogs.com/hxling/archive/2011/04/27/2031149.html

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的使用jQuery queue(队列) 遇到的问题及解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。