Solution to lag caused by javascript engine monopolizing thread for a long time_javascript skills

The single-threaded nature of the Javascript engine will cause the thread to be monopolized for a long time when processing a large loop traversal, resulting in the inability to respond to other events (such as user operations) in a timely manner, and in severe cases, freezing or even suspended animation. In order to solve the above problem, a feasible mechanism is to split the large loop into several small loop segments and execute them in slices, so that the Javascript engine has the opportunity to insert and execute other things between each segment, thereby effectively improving the performance experience

Ansync.js

Copy code The code is as follows:

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;

方法很简单，但是很实用，有相同项目需求的小伙伴参考下吧