JavaScript解决大循环卡顿的分片执行方案

JavaScript分片执行机制

JavaScript引擎采用单线程模型，当执行大型循环遍历时，会长时间占用主线程，导致用户交互等其它事件无法及时响应，严重时引发界面卡顿甚至假死。为缓解此问题，可将大型循环拆分为若干小片段进行分片执行，使引擎在各片段间隙有机会处理其他任务，从而有效改善性能体验。

Ansync.js

Ansync.js代码实现function Ansync (totalCount, segmentCount, workCallback, returnCallback)
{
var num_of_item_for_each_segment = segmentCount;
var num_of_segment = Math.ceil(totalCount / num_of_item_for_each_segment);
var count_of_segment = 0;
var timer;
var start, end;
this.process = function(scope, timeout)
    {
if (scope != undefined)
        {
workCallback = workCallback.bind(scope);
returnCallback = returnCallback ? returnCallback.bind(scope) : undefined;
        }
if (count_of_segment == num_of_segment)
        {
clearTimeout(timer);
if (returnCallback != undefined)
returnCallback();
        }
else
        {
start = count_of_segment * num_of_item_for_each_segment;
end = Math.min(totalCount, (count_of_segment + 1) * num_of_item_for_each_segment);
if (num_of_segment == 1)//needn't create timer
            {
workCallback(start, end);
count_of_segment = 1;
this.process();
            }
else
            {
timer = setTimeout(function ansyncTimeout(){
if (workCallback(start, end)) //finish process if function returns true
                    {
count_of_segment = num_of_segment;
                    }
else
                    {
count_of_segment++;
                    }
this.scope.process();
}.bind({scope: this}),timeout == undefined ? Ansync.TimeOut : timeout);
            }
        }
    }
}
Ansync.TimeOut = 5;

该方法逻辑简单但实用，有类似项目需求的开发者可参考使用。