A solution for javascript engines that monopolize threads for long periods of time

  • 2020-03-30 04:26:25
  • OfStack

The single-threaded nature of the Javascript engine makes it impossible to handle a large loop that lasts for a long time with an exclusive thread, causing other events (such as user actions) to fail to respond in a timely manner and, in severe cases, to cause congestion or even suspended animation. To solve this problem, a possible mechanism is to split the large loop into smaller looping fragments for piecing execution, giving the Javascript engine the opportunity to insert something else between the segments and effectively improve the performance experience

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;

The method is very simple, but very practical, there is the same project needs of the small friends for reference


Related articles: