Foto Chris Liverani saidil Unsplash

Debounce vs Throttle vs Queue täitmine

Internetis on palju artikleid, mis selgitavad, mis on silumine, kuristamine ja mis vahe neil on. Kuid enamik, mis ma leidsin, olid sageli pikad, segased ja keerukate koodinäidetega (kui neid oli).

Nii et ma olen nende jaoks välja pakkunud lihtsustatud töökoodi näited, et saada kontseptsioon ühe pilguga. Alustame lihtsamaga, Debounce.

Debounge

Funktsiooni tagasilükkamine on kasulik siis, kui sellele pidevalt helistatakse ja soovime, et see täidetaks teatud aja möödudes, kui viimasest kõnest on möödunud aeg.

See on kasulik juhul, kui soovime, et olukord enne käitleja kutsumist stabiliseeruks, et töötulemusi parandada. Üks parimaid deblokeerimise näiteid, mille leidsin, oli selle ajaveebi autor Jhey Tompkins

Tühistamiseks võiks meie rakenduses olla mõni automaatse salvestamise funktsioon. Automaatse salvestamise abil rakenduses proovib meie rakenduse olek salvestada iga kord, kui kasutaja värskendusi teeb või mingil viisil toimib. Enne oleku salvestamist on vaja 5 sekundit, enne kui saate salvestada uue oleku ja korrata seda. Kui toimub mõni interaktsioon, lähtestab ta taimeri uuesti 5 sekundiks.

funktsiooni debounce (funktsioon, waitTime) {
    var ajalõpp;

    tagastamise funktsioon () {
        clearTimeout (ajalõpp);
        timeout = setTimeout (funktsioon, ooteaeg);
    };
};

Mis see on, see on see, kui lihtne debountuur olla võib.

Drossel

Seda tehnikat nimetatakse paremini. Funktsiooni aktiveerimine on kasulik siis, kui sellele pidevalt helistatakse ja me soovime, et see täidetaks kord x sekundis. Selle heaks näiteks on kerimisprotsessor või suuruse muutmise käitleja, kus me tahame käitlejat käitada üks kord kindla aja jooksul, isegi kui funktsiooni kutsutakse pidevalt.

funktsiooni drossel (funktsioon, waitTime) {
    var timeout = null;
    var eelmine = 0;

    var hiljem = function () {
        eelmine = Date.now ();
        ajalõpp = null;
        func ();
    };

    tagastamise funktsioon () {
        var nüüd = Date.now ();
        var alles = waitTime - (nüüd - eelmine);
        if (järelejäänud <= 0 || järelejäänud> waitTime) {
            if (ajalõpp) {
                clearTimeout (ajalõpp);
            }
            hiljem ();
        } else if (! timeout) {// null timeout -> pole ootel täitmist
            
            timeout = setTimeout (hiljem, järelejäänud);
        }
    };
};

Extra: järjekorda

Deklaratsiooni ja drosseli ridadel saab funktsioonikõnesid ka järjekorda panna. Selles funktsioonis täidetakse mitu korda seda kutsutakse, kuid enne iga täitmist on kindel ooteaeg. See tuli minu jaoks hiljuti kasuks, kui kasutasin teeki ja sattusin viga, mis kutsus selle funktsiooni mitu korda viivituseta esile ja tekitas probleemi. (võib olla ka muid kasutusjuhtumeid :))

funktsioonide järjekord (funktsioon, waitTime) {
    var funcQueue = [];
    var isWaiting;

    var executeFunc = funktsioon (parameetrid) {
        isWaiting = tõsi;
        func (parameetrid);
        setTimeout (esitamine, ooteaeg);
    };

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

    tagastamise funktsioon (parameetrid) {
        if (isWaiting) {
            funcQueue.push (parameetrid);
        } veel {
            executeFunc (parameetrid);
        }
    }
};

Kokkuvõtteks

Enne kui otsustate optimeerimismeetodi kasuks, astuge tagasi ja mõelge, milline neist annab sel juhul parima tulemuse. Alati on üks, mis on esinevam.

Jätke meile vastus või tweeti mulle küsimusi või ettepanekuid.