Solution au décalage causé par le moteur Javascript monopolisant le thread pendant une longue période_compétences Javascript

La nature monothread du moteur Javascript entraînera la monopolisation du thread pendant une longue période lors du traitement d'un parcours de boucle important, ce qui entraînera l'incapacité de répondre à d'autres événements (tels que les opérations de l'utilisateur) en temps opportun, et dans les cas graves, le gel ou même la suspension de l'animation. Afin de résoudre le problème ci-dessus, un mécanisme réalisable consiste à diviser la grande boucle en plusieurs petits segments de boucle et à les exécuter en tranches, de sorte que le moteur Javascript ait la possibilité d'insérer et d'exécuter d'autres choses entre chaque segment, améliorant ainsi efficacement la expérience de performance

Ansync.js

Copier le code Le code est le suivant :

fonction 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 minuterie;
    var début, fin ;
    this.process = function(scope, timeout)
    {
        si (portée != non défini)
        {
            workCallback = workCallback.bind(scope);
            returnCallback = returnCallback ? returnCallback.bind(scope) : non défini;
        >
        si (count_of_segment == num_of_segment)
        {
            clearTimeout(minuterie);
            if (returnCallback != non défini)
                returnCallback();
        >
        d'autre
        {
            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)//pas besoin de créer une minuterie
            {
                workCallback(début, fin);
                count_of_segment = 1;
                this.process();
            >
            d'autre
            {
                timer = setTimeout(fonction ansyncTimeout(){
                    if (workCallback(start, end)) //terminer le processus si la fonction renvoie true
                    {
                        count_of_segment = num_of_segment;
                    >
                    d'autre
                    {
                        count_of_segment ;
                    >
                    this.scope.process();
                }.bind({scope: this}),timeout == non défini ? Ansync.TimeOut : délai d'attente);
            >
        >
    >
>
Ansync.TimeOut = 5;

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