Javascript 引擎的單線程特性使得在處理一個較大的循環(huán)遍歷時會長時間獨占線程，導致其它事件（例如用戶操作）無法及時響應，嚴重時造成卡頓甚至是假死現(xiàn)象。為解決上述問題，一種可行機制是將大的循環(huán)拆分成若干小的循環(huán)片段分片執(zhí)行，使得Javascript 引擎有時機在各段之間插入執(zhí)行其它事情，從而有效改善性能體驗

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;