博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用jQuery queue(队列) 遇到的问题及解决方案
阅读量:7064 次
发布时间:2019-06-28

本文共 3405 字,大约阅读时间需要 11 分钟。

应用场景描述:

我现在要做文章列表的批量生成,使用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('准备数据完成。
'); $('#detail').append('文章列表共 ' + $('#w').data("pagecount")+ '
'); $(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 + ' 创建成功。
'); $('#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('准备数据完成。
'); $('#detail').append('文章列表共 ' + $('#w').data("pagecount").length + '
'); $(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 + ' 创建成功。
'); $('#fn').text('状态:' + state.fn + ' 创建成功。'); var w = (n * 100 / pagecount.length) + '%'; alert(w); $('.statusbar').width(w).children('span').text(w); } $(document).dequeue('ajax_article'); }); }); });}
问题解决了,但始终想不明白为什么,这到底是怎么回子事呀。头大了。。
盼高手解惑!!!!!

转载地址:http://dwnll.baihongyu.com/

你可能感兴趣的文章
工程师笔记|浅析AI平台的架构设计
查看>>
开店仅1年,为何能在一天实现 “三销冠”
查看>>
人工智能火了,为啥医疗成为最先受益者?
查看>>
雷军带领小米老员工公园步行 称这些人是小米最宝贵财富
查看>>
滴滴公布自查进展:免去黄洁莉顺风车事业部总经理职务
查看>>
中国PPP管理库项目累计投资额13.2万亿元
查看>>
甘肃崆峒古镇“文化赶集”:非遗“上台”贺新春
查看>>
俄罗斯食品来中国“过年”
查看>>
市场监管总局:保健食品应标注不具疾病预防治疗功能
查看>>
GitHub 上开源的区块链项目 90% 死亡了
查看>>
澳网张帅首夺大满贯 女双携斯托瑟挑落卫冕冠军
查看>>
“平潭-高雄”货运直航开通 三大优势凸显
查看>>
“共度欢乐春节”摄影图片展在阿斯塔纳开幕
查看>>
新光大ArtPark9亮相 以“艺术”再造生活方式
查看>>
关于Python数据分析,这里有一条高效的学习路径
查看>>
三亚:严查“先登记支付房款、后补交社保或个税”行为
查看>>
神级程序猿用HTML5代码画出恐龙求欢图,想象力太丰富!
查看>>
谋势、聚力、强生态,用友三十而立
查看>>
python爬虫——40行代码爬取「笔趣看」全部小说
查看>>
数据分析师完整的知识结构
查看>>