Фота Крыса Лівэрані на Unsplash

Дэбюнс супраць дросельнай - супраць выканання чаргі

У Інтэрнэце ёсць шмат артыкулаў, якія тлумачаць, што такое "Адкідванне", "Дросенне" і ў чым розніца паміж імі. Але большасць знойдзеных мне часта былі доўгімі, заблытанымі і са складанымі прыкладамі кода (калі такія маюцца).

Такім чынам, я прыдумаў спрошчаныя прыклады працы кода для іх, каб атрымаць паняцце імгненна. Давайце пачнем з прасцейшага, Debounce.

Адкіньце

Зняцце функцыі спатрэбіцца, калі яна выклікаецца пастаянна, і мы хочам, каб яна выконвалася праз пэўны перыяд, калі прайшло час з моманту апошняга званка.

Гэта спатрэбіцца ў тых выпадках, калі мы хочам, каб сітуацыя стабілізавалася, перш чым выклікаць апрацоўшчык, каб павысіць прадукцыйнасць. Адзін з лепшых прыкладаў, які я знайшоў, быў у гэтым блогу Джэй Томпкінс

Для разборкі ў нашым дадатку можа быць функцыя аўтаматычнага захавання. Пры дапамозе аўтаматычнага захавання ў дадатку спрабуе захаваць стан нашага прыкладання кожны раз, калі карыстальнік абнаўляе альбо мае нейкае ўзаемадзеянне. Ён чакае 5 секунд, каб пераканацца, што ніякіх іншых абнаўленняў і ўзаемадзеянняў не адбываецца, перш чым захаваць стан, інакш ён запісвае новы стан і паўтарае працэс. У выпадку ўзаемадзеяння ён зноў скідае таймер на 5 секунд.

функцыя развязкі (func, waitTime) {
    вар тайм-аўт;

    функцыя вяртання () {
        clearTimeout (таймаўт);
        timeout = setTimeout (func, waitTime);
    };
};

Вось так, гэта простае развязка можа быць.

Дросель

Гэты метад больш трапна названы. Функцыя дроселя спатрэбіцца, калі яна выклікаецца пастаянна, і мы хочам, каб яна выконвалася раз у х секунд. Добрым прыкладам гэтага можа стаць апрацоўшчык пракруткі або апрацоўшчык змены памеру, калі мы хочам выканаць апрацоўшчык адзін раз за фіксаваны перыяд часу, нават калі функцыя выклікаецца пастаянна.

функцыя дросельнай засланкі (func, waitTime) {
    var timeout = null;
    var папярэдні = 0;

    var later = function () {
        папярэдні = Date.now ();
        тайм-аўт = нулявы;
        func ();
    };

    функцыя вяртання () {
        var now = Date.now ();
        var пакінуты = waitTime - (цяпер - папярэдні);
        калі (засталося <= 0 || засталося> час чакання) {
            калі (тайм-аўт) {
                clearTimeout (таймаўт);
            }
            пазней ();
        } else if (! timeout) {// null timeout -> няма выканання ў чаканні
            
            timeout = setTimeout (пазней, засталося);
        }
    };
};

Дадаткова: Чарга

Па лініях развязкі і дросельнай засланкі функцыі выклікаў могуць быць пастаўлены ў чаргу. Пры гэтым функцыя выконваецца колькі разоў яна выклікана, але перад кожным выкананнем ёсць фіксаваны час чакання. Нядаўна ён спатрэбіўся мне, калі я карыстаўся бібліятэкай і сутыкнуўся з памылкай, якая выклікала функцыю ў ёй некалькі разоў, без затрымкі выклікала праблемы. (могуць быць і іншыя выпадкі выкарыстання :))

Чарга функцый (func, waitTime) {
    var funcQueue = [];
    var isWaiting;

    var ExecuteFunc = функцыя (парамы) {
        isWaiting = праўда;
        func (парамы);
        setTimeout (гуляць, пачакаць);
    };

    var play = function () {
        isWaiting = хлусня;
        калі (funcQueue.length) {
            var params = funcQueue.shift ();
            ExecuteFunc (парамы);
        }
    };

    функцыя вяртання (парамы) {
        калі (isWaiting) {
            funcQueue.push (парамы);
        } яшчэ {
            ExecuteFunc (парамы);
        }
    }
};

У заключэнне

Перш чым вызначыцца з тэхнікай аптымізацыі, зрабіце крок назад і падумайце, які з іх дасць лепшы вынік у гэтым выпадку. Заўсёды ёсць той, які будзе больш эфектыўным.

Калі ласка, не саромейцеся пакідаць адказ альбо цвыркайце мне пытанні альбо прапановы.