前端模拟“多线程”提交Http请求

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

但是，如果非要这样用，有什么方法呢？

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

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

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

 

需要用到的关键api：

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

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

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

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

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

代码示例：

messageBox.show("处理中...");

//使用setInterval延迟执行
setInterval(function(){
    //创建一批10个“线程”
    for(var i=0;i<10;i++){

        //使用匿名函数(方便直接自我递归调用)
        (function(){
            //如果所有数据已处理完，退出(略)
            //获取一批未处理的记录（略）
            var funarg = arguments;//得到匿名函数本身引用
            ajax({
                url:'xxx',
                param:'ids=1,2,3',
                async:false,
                callback:function(){
                    //改变界面进度、改变已处理列表（略）

                    //匿名函数自我递归调用
                    funarg.callee();

                }
            });
        })();
    }
},200);