Chriso Liverani nuotrauka „Unsplash“

Debatų ir droselio vs eilės vykdymas

Internete yra daugybė straipsnių, kuriuose paaiškinama, kas yra debiutantai, droseliai ir koks skirtumas tarp jų. Bet dažniausiai radau daug laiko, painiavos ir sudėtingų kodų pavyzdžių (jei tokių buvo).

Taigi aš sugalvojau supaprastintų darbo kodų pavyzdžius, kad jie suprastų sąvoką. Pradėkime nuo paprastesnio, „Debounce“.

Debute

Funkcijos nurašymas yra naudingas, kai ji yra nuolat kviečiama, ir mes norime, kad ji būtų vykdoma praėjus tam tikram laikotarpiui, jei praėjo laikas nuo paskutinio skambučio.

Tai labai naudinga tais atvejais, kai norime, kad padėtis stabilizuotųsi prieš iškviečiant prižiūrėtoją, kad pagerintume darbą. Šiame tinklaraštyje vienas iš geriausių mano rastų pavyzdžių, kuriuos radau, buvo Jhey Tompkins

Norėdami atjungti, mūsų programoje galėjo būti automatinio išsaugojimo funkcija. Automatinis programos išsaugojimas bando išsaugoti mūsų programos būseną kiekvieną kartą, kai vartotojas atnaujina arba sąveikauja. Prieš išsaugant būseną, reikia palaukti 5 sekundes, kad įsitikintumėte, jog jokie kiti atnaujinimai ar sąveikos nėra atliekamos. Ji įrašo naują būseną ir pakartoja procesą. Jei nutinka kokia nors sąveika, jis vėl nustato 5 sekundžių laikmatį.

funkcijos nurašymas (func, waitTime) {
    var timeout;

    grąžinimo funkcija () {
        „clearTimeout“ (timeout);
        timeout = setTimeout (func, waitTime);
    };
};

Tai, tai, kiek paprastas gali būti debiutas.

Droselis

Ši technika yra tikslingiau pavadinta. Aktyvuoti funkciją yra naudinga, kai ji yra vadinama nuolat ir norime, kad ji būtų vykdoma kartą per x sekundes. Puikus to pavyzdys būtų slinkties tvarkyklė arba dydžio keitimo tvarkyklė, kai mes norime, kad tvarkyklė būtų vykdoma vieną kartą per nustatytą laiko tarpą, net jei funkcija vis iškviečiama nuolat.

funkcijos droselis (func, waitTime) {
    var timeout = nulis;
    var ankstesnis = 0;

    var vėliau = funkcija () {
        ankstesnis = Data.now ();
        timeout = null;
        func ();
    };

    grąžinimo funkcija () {
        var dabar = Data.now ();
        var liko = waitTime - (dabar - ankstesnis);
        if (liko <= 0 || liko> waitTime) {
            if (timeout) {
                „clearTimeout“ (timeout);
            }
            vėliau ();
        } else if (! timeout) {// null timeout -> nėra laukiančio vykdymo
            
            timeout = setTimeout (vėliau, liko);
        }
    };
};

Papildoma: eilių sudarymas

Funkcijų skambučiai taip pat gali būti eilėje, kai atjungimo ir droselio linijos yra. Ši funkcija vykdoma tiek kartų, kiek ji iškviečiama, tačiau prieš kiekvieną vykdymą yra fiksuotas laukimo laikas. Tai man labai pravertė neseniai, kai aš naudojau biblioteką ir įbėgau į klaidą, keletą kartų nedelsdama paskambindama joje esančiai funkcijai. (gali būti ir kitų naudojimo atvejų :))

funkcijų eilė (func, waitTime) {
    var funcQueue = [];
    var isWwaiting;

    var executeFunc = funkcija (params) {
        isWaiting = tiesa;
        func (params);
        setTimeout (žaisti, laukti);
    };

    var play = function () {
        isWaiting = false;
        if (funcQueue.length) {
            var params = funcQueue.shift ();
            executeFunc (params);
        }
    };

    grąžinimo funkcija (params) {
        if (isWwaiting) {
            funcQueue.push (params);
        } Kitas {
            executeFunc (params);
        }
    }
};

Pabaigai

Prieš nuspręsdami dėl optimizavimo technikos, atsitraukite ir pagalvokite, kuris iš jų duos geriausią rezultatą tuo atveju. Visada yra tas, kuris bus labiau atlikėjas.

Nedvejodami palikite atsakymą arba perskaitykite man bet kokius klausimus ar pasiūlymus.