JS+WCF实现进度条实时监测数据加载量的方法详解

前端之家收集整理的这篇文章主要介绍了JS+WCF实现进度条实时监测数据加载量的方法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例讲述了JS+WCF实现进度条实时监测数据加载量的方法分享给大家供大家参考,具体如下:@H_404_1@

背景@H_404_1@

由于项目中需要导入大量数据到memcache中@H_404_1@

需要用WCF调取11万条数据,由于那边多级联查和排序,所以比较慢(1分钟左右)@H_404_1@

同时这边需要对数据进行处理,合并成2万条数据,然后存储,需要一定时间(也是1分钟左右)@H_404_1@

总之,完成这个数据导入一共需要1分30秒左右@H_404_1@

这时候,需要一个进度条来实时监测完成的数据量@H_404_1@

(之前用的是一个动态图,不能知道程序目前的完成量,甚至不知道它是不是卡住了,只能等着)@H_404_1@

功能@H_404_1@

1.开辟线程,用于加载数据,处理数据 2.前台实时读取后台数据,并显示@H_404_1@

代码@H_404_1@

view-html@H_404_1@

数据准备

view-js@H_404_1@

提示','是否要进行数据初始化?',function (r) { if (!r) { return; } else { $('#container').show(); var t1 = window.setInterval(process_bar,1500); } }); }); }); function process_bar() { $.ajax({ type: "POST",async: true,url: "/Paper/LoadData",success: function (result) { $('#progress_bar .ui-progress').animateProgress(result); if (result =="100") { $('#main_content').slideDown(); $('#fork_me').fadeIn(); setTimeout(function () { $('#container').hide();; },1500); window.clearInterval(t1); } } }) }

controller@H_404_1@

后台@H_404_1@

获取数据量不能超过10万 while (page * amount == list.Count) { //code....code ....code.... load_data_amount = load_data_amount + 5; } load_data_amount = 50;//读取数据默认的工作量 double totalamount = list.Count(); foreach (var item in list) { //code....code ....code.... load_data_amount = Convert.ToInt32((1 - (totalamount--) / double.Parse(list.Count().ToString())) * 50) + 50;//根据数据改变的完成工作量 } load_data_amount = 100;//完成工作量 flag = true; return flag; } //返回当前准备数据量 public int LoadDataAmount() { return load_data_amount; }

问题 & 解决@H_404_1@

1.进度条生成

@H_404_1@

解决:使用网上的demo,css+js可以动态生成,改变数据即可@H_404_1@

2.线程问题

@H_404_1@

解决:开始是监测使用线程,后来改成处理数据使用线程@H_404_1@

3.实时监测问题

@H_404_1@

解决:处理数据使用线程自动运行,前台使用ajax不断查询后台的一个变量load_data_amount@H_404_1@

4.ajax报错问题

@H_404_1@

注意是返回值的类型,以及是result还是result.d,不同情况下是不一样的@H_404_1@

5.数据类型问题

@H_404_1@

解决:读取数据完成的百分比,是用 完成量/所有量 得到的,这里的数一直算不对,是因为int类型承受不住11万的运算以及之后的小数,用double和float可以@H_404_1@

小结@H_404_1@

本来想着开个线程,加个变量,返回前台,加一个进度条,读取变量就OK了@H_404_1@

但是中间的这个MVC,这个Spring,这个接口,之前的方法各种不好使,以及在它们下面的运算,ajax……一个一个分开解决,最后还是解决了@H_404_1@

分而治之,逐个解决,测试就好@H_404_1@

另外,框架和合作在带来便利的同时,中间的限制和bug也会让你的效率下降@H_404_1@

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》及《》@H_404_1@

希望本文所述对大家JavaScript程序设计有所帮助。@H_404_1@

猜你在找的JavaScript相关文章