Fotografijo Chris Liverani na Unsplash

Izvedba Debounce proti Throttleu v vrsti

Na spletu imamo veliko člankov, ki razlagajo, kaj so razbijanje, dušenje in kakšna je razlika med njimi. Toda večina, ki sem jih našel, je bila pogosto dolga, zmedena in z zapletenimi primeri kod (če sploh).

Torej sem prišel do poenostavljenih primerov delovne kode, da bi dobili koncept v hipu. Začnimo z lažjo, Debounce.

Odbitek

Preklic funkcije je uporaben, ko jo kličemo neprekinjeno in želimo, da se ta po določenem času izvrši, če od zadnjega klica mine čas.

To je koristno v primerih, ko želimo, da se stanje stabilizira, preden pokličemo upravljavca, da bi izboljšali zmogljivost. Eden najboljših primerov razbijanja, ki sem ga našel, je bil v tem blogu Jhey Tompkins

Za razveljavitev bi lahko v naši aplikaciji imeli nekaj funkcije samodejnega shranjevanja. S samodejnim shranjevanjem v aplikaciji poskuša stanje naše aplikacije shraniti vsakič, ko uporabnik posodobi ali opravi nekaj interakcij. Počaka 5 sekund, da se prepriča, da ni nobenih drugih posodobitev ali interakcij, preden shrani stanje, če posname novo stanje in ponovi postopek. Če pride do kakršne koli interakcije, ponovno nastavi svoj časovnik za 5 sekund.

funkcijo debounce (func, waitTime) {
    var timeout;

    povratna funkcija () {
        clearTimeout (časovna omejitev);
        timeout = setTimeout (func, waitTime);
    };
};

To je to, tako preprosto je lahko debounce.

Dušica

Ta tehnika je bolj poimenovana. Funkcija ustavljanja je primerna, ko jo kličemo nenehno in želimo, da se ta izvaja enkrat na x sekund. Dober primer tega bi bil drsnik ali drsnik za spreminjanje velikosti, kjer želimo izvajalca izvajati enkrat v določenem časovnem obdobju, tudi če se funkcija prikliče neprekinjeno.

funkcijska loputa (func, waitTime) {
    var timeout = nič;
    var prejšnji = 0;

    var kasneje = funkcija () {
        prejšnji = Date.now ();
        timeout = ničelna;
        func ();
    };

    povratna funkcija () {
        var zdaj = Date.now ();
        var preostali = waitTime - (zdaj - prejšnji);
        če (preostalo <= 0 || preostalo> čas čaka) {
            če (časovna omejitev) {
                clearTimeout (časovna omejitev);
            }
            kasneje ();
        } else, če (! timeout) {// null timeout -> ni čakajoče izvedbe
            
            timeout = setTimeout (pozneje, preostalo);
        }
    };
};

Dodatno: čakalne vrste

Na linijah debounce in ročice je mogoče čakati tudi na funkcijske klice. V tem primeru se funkcija izvede tolikokrat, ko je klicana, vendar je pred vsako izvedbo določen čas čakanja. Pred kratkim mi je prišel prav, ko sem uporabljal knjižnico in naletel na hrošča, ki je v njem večkrat poklical funkcijo, brez odlašanja pa je povzročal težavo. (lahko obstajajo tudi drugi primeri uporabe :))

čakalna vrsta funkcij (func, waitTime) {
    var funcQueue = [];
    var is čaka;

    var ExecuteFunc = funkcija (params) {
        isWaiting = res;
        func (parame);
        setTimeout (predvajaj, čakaj čas);
    };

    var play = funkcija () {
        isWaiting = napačno;
        če (funcQueue.length) {
            var params = funcQueue.shift ();
            ExecuteFunc (parame);
        }
    };

    povratna funkcija (parame) {
        če (is čaka) {
            funcQueue.push (params);
        } else {
            ExecuteFunc (parame);
        }
    }
};

Za zaključek

Preden se odločite za optimizacijsko tehniko, naredite korak nazaj in pomislite, katera bo dala najboljši rezultat v tem primeru. Vedno obstaja takšen, ki bo bolj uspešen.

Prosim, prosite, da pustite odgovor ali mi pošljete sporočila z vprašanji ali predlogi.