JSFiddle - React, Tailwind, and code Playground

by qiangtou

HTML

<button id="b1">分批处理</button>
<button id="b2">一次性搞完</button>
<ul id="content"></ul>
<ul id="log"></ul>

CSS

#content {
    float:left;
    width:100px;
}

JavaScript

function log(_n, n) {
    var str = _n + '-' + n + ',处理了' + (_n - n) + '个任务';
    $("#log").prepend('<li>' + str + '</li>');
}
//初始化数据，容量为10000的数组
var content = $('#content'),
    arr = [];
for (var i = 3000; i--;) {
    arr[i] = i;
}
//对单个obj进行耗时操作
var doAction = function (obj) {
    var cls = 'hehe';
    child = $('<li>').append(obj);
    content.prepend(child);
    for (var i = 100; i--;) child.addClass(cls).removeClass(cls);
}
/**以100毫秒为单位分批调用n次fun */
var bat = function bat(n, fun) {
    //无视浏览器性能差异的批处理
    var _n = n;
    var t = new Date,
        callee = arguments.callee;
    do {
        if (!n) { //退出任务条件
            log(_n, n);
            return;
        }
        fun(n--);
    } while (new Date - t < 100); //100ms休息一下
    log(_n, n);
    setTimeout(function () {
        callee(n, fun);
    }, 20); //这里是休息时间
}
$('#b1').click(function () {
    content.empty();
    $("#log").empty();
    //分批效果
    bat(arr.length, function (i) {
        doAction(arr[i]);
    });
});
$('#b2').click(function () {
    content.empty();
    $("#log").empty();
    //一次性干完
    for (var i = arr.length; i--;) {
        doAction(arr[i]);
    }
});