JS中配合layer弹窗实现数字进度的两种方法

JS中配合layer弹窗实现数字进度的两种方法

主要是实现如图所示效果

---

之前我在处理批量数据的时候，没有想到在前台做类似于进度的提示，当数据量大的时候且服务器端处理速度较慢时，用户容易误以为程序或者网站卡住了。所以需要加上进度来提示用户。
于是，第一版出来了，是这样的：

var n = $("#ids").val().split(",");
layer.open({
    type: 0,
    title: false,
    closeBtn: 0,
    btn: false,
    content: '<div class="executeprogress">正在执行，请耐心等待... ...</div>'
});
for (var i = 1; i <= n.length; i++) {
    $('.executeprogress').html('正在执行第' + (i) + '/' + n.length + '条数据，请稍等');
    $.ajax({
        async: false,
        type: "POST",
        data: {
            Number: number,
            Year: year,
            State: state,
            userid: n[i - 1].toString()
        },
        url: 'User/AddSet',
        dataType: 'text',
        success: function (data) {
         var result = $.parseJSON(data);
         if (result) {
             if (result.Success == true) {
             msg = result.Msg;
             } else {
              b = false;
              msg = result.Msg;
             }
       }}
    });
}

这时候就发现，不管怎样 弹窗显示进度那里都是有问题的。后来查了下，好像是：浏览器的渲染(UI)线程和js线程是互斥的，在执行js耗时操作时，页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题，但当设置为同步请求时，其他的动作（ajax函数后面的代码，还有渲染线程）都会停止下来。即使我的DOM操作语句是在发起请求的前一句，这个同步请求也会“迅速”将UI线程阻塞，不给它执行的时间。
于是耗费了大量时间思考。
第二版：

使用setInterval实现

 function () {
            layer.open({
                type: 0,
                title: false,
                closeBtn: 0,
                btn: false,
                content: '<div class="executeprogress">开始执行，请耐心稍等... ...</div>',
            });
            var n = eval('(' + $("#str").val() + ')');
            var i = 3;
            mytime = setInterval(function () {
                $('.executeprogress').html('正在执行第' + (i) + '/' + n.length + '条');
                $.ajax({
                    async: false,
                    type: "POST",
                    data: { },
                    url: 'User/Account',
                    dataType: 'text',
                    success: function(data) {
                        var str = $.parseJSON(data);
                        if (!str.success) {
                            b = false;
                        }
                    }
                });
                i++;
                if (i >= n.length) {
                    clearInterval(mytime);
                    if (b == false) {
                        //调整错误列表
                        return;
                        } else {
                            var index = parent.layer.getFrameIndex(window.name); //获取窗口索引  
                            parent.layer.close(index); //关闭弹出的子页面窗口
                        }
                    }
                },
                200);
        }

关于setInterval()

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 >clearInterval() 方法的参数。 —— [ w3school]

这个的主要思路就是利用setinterval()方法重复调用ajax，达到一定条件就清除计时器。

使用回调函数实现

function inits() {
            var num = 0;
            var count = 10;//这里假装获取10条数给count；          
            var rec = function () {
                num++;
                if (num <= count) {
                    $('#show').html('正在执行第' + num + '/' + count + '条数据，请稍等');
                    getDate(rec)
                }
            };
            var getDate = function (callback) {
                $.ajax({
                    type: "get",
                    url: "xxxxxxxxxx",
                    dataType: 'json',
                    success: function (data) {
                        callback();
                    },
                    error: function (xml) {
                    }
                })
            };
            rec();
        }