Lösung für Verzögerungen, die dadurch verursacht werden, dass die Javascript-Engine Threads für lange Zeit monopolisiert._Javascript-Kenntnisse

Die Single-Thread-Natur der Javascript-Engine führt dazu, dass der Thread bei der Verarbeitung großer Schleifendurchläufe lange Zeit monopolisiert wird, was dazu führt, dass nicht rechtzeitig auf andere Ereignisse (z. B. Benutzervorgänge) reagiert werden kann. und in schweren Fällen ein Einfrieren oder sogar eine unterbrochene Animation. Um das oben genannte Problem zu lösen, besteht ein praktikabler Mechanismus darin, die große Schleife in mehrere kleine Schleifensegmente aufzuteilen und diese in Abschnitten auszuführen, sodass die Javascript-Engine die Möglichkeit hat, zwischen den einzelnen Segmenten andere Dinge einzufügen und auszuführen, wodurch die Schleife effektiv verbessert wird Leistungserfahrung

Ansync.js

Code kopieren Der Code lautet wie folgt:

Funktion 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 != undefiniert)
        {
            workCallback = workCallback.bind(scope);
            returnCallback = returnCallback ? returnCallback.bind(scope) : undefiniert;
        }
        if (count_of_segment == num_of_segment)
        {
            clearTimeout(timer);
            if (returnCallback != undefiniert)
                returnCallback();
        }
        sonst
        {
            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)//brauche keinen Timer erstellen
            {
                workCallback(start, end);
                count_of_segment = 1;
                this.process();
            }
            sonst
            {
                timer = setTimeout(function ansyncTimeout(){
                    if (workCallback(start, end)) //Prozess beenden, wenn die Funktion true zurückgibt
                    {
                        count_of_segment = num_of_segment;
                    }
                    sonst
                    {
                        count_of_segment ;
                    }
                    this.scope.process();
                }.bind({scope: this}),timeout == undefiniert ? Ansync.TimeOut : Zeitüberschreitung);
            }
        }
    }
}
Ansync.TimeOut = 5;

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