首先说,javascript没有多线程这样一个说法,我说的只是类似那种效果。其次,不建议使用这种方式解决问题,多线程应该交给后台去做。

但是,如果非要这样用,有什么方法呢?

我在工作中就遇到了这样的问题,由于功能等着急用,整体改进会涉及到前后台,改动会非常大,所以先想了一个临时性的解决方法。
问题场景是:后台管理系统中有一个表格界面,有一千多条记录,需要为这一千多条记录每条记录生成一堆关联数据,通过多选行和点击触发按钮执行。要生成的关联数据比较大,涉及到往几十张表里插入记录,因此每条记录的生成过程比较耗时,大概3秒左右。而问题是,这个界面在批量执行时没有进度显示,仅显示处理中...,在执行一千多条记录时,等待的时间非常长,用户往往认为系统死了。为了解决这个问题,我改进了前端处理方法。

思路是:前端模拟一定数量的“线程”提交Http请求,每个请求完成后更新计数器值并显示进度,如果还有数据需要处理,“线程”再自我递归调用,直到数据池里的所有数据处理完毕。

举例:将100万元散人民币分别分给10个人(10个线程)去整理,按1万元进行打捆,每人一次只能拿1万元,打捆完毕后再拿1万元,周而复始,直到100万元人民币都整理完。

 

需要用到的关键api:

setInterval(function) -- 这个可以用来防止界面阻塞,每个ajax执行完成后都可以更新界面进度显示。

(function(){})() -- 匿名函数,用于定义一个函数并立即执行。

arguments -- javascript function的内部变量,是对函数本身及参数的引用。

callee() -- 触发函数的自我递归方法

原理及方法:循环执行一定数量的ajax异步请求方法,每个ajax执行完成后再自我递归回调,每次请求完成更新统计变量,直到所有任务执行完毕。

代码示例:



1 messageBox.show("处理中...");
 2 
 3 //使用setInterval延迟执行
 4 setInterval(function(){
 5     //创建一批10个“线程”
 6     for(var i=0;i<10;i++){
 7 
 8         //使用匿名函数(方便直接自我递归调用)
 9         (function(){
10             //如果所有数据已处理完,退出(略)
11             //获取一批未处理的记录(略)
12             var funarg = arguments;//得到匿名函数本身引用
13             ajax({
14                 url:'xxx',
15                 param:'ids=1,2,3',
16                 async:false,
17                 callback:function(){
18                     //改变界面进度、改变已处理列表(略)
19 
20                     //匿名函数自我递归调用
21                     funarg.callee();
22 
23                 }
24             });
25         })();
26     }
27 },200);