Debounce vs Throttle vs Queue Ausféierung

Mir hunn vill Artikelen um Internet erkläert wat Debouncing, Throttling sinn a wat den Ënnerscheed tëscht hinnen ass. Awer déi meescht, déi ech fonnt hunn, waren dacks laang, duerchernee a mat komplizéierte Code Beispiller (wa méiglech).

Also hunn ech vereinfacht Aarbechtscode Beispiller gemaach fir si fir d'Konzept an engem Jiffy ze kréien. Loosst ufänken mat der méi einfacher, Debounce.

Ofkennen

Eng Funktioun ofbriechen ass praktesch wann se kontinuéierlech opgeruff ginn a mir wëllen datt se no enger gewëssener Zäit ausféiert wann d'Zäit zënter dem leschte Uruff passéiert ass.

Dëst ass praktesch an Fäll wou mir d'Situatioun wëllen stabiliséieren ier Dir den Händler rufft fir d'Performance ze verbesseren. Ee vun de beschten Beispiller vu Debounce déi ech fonnt hunn, war an dësem Blog vum Jhey Tompkins

Fir ze debounen, kéinte mir e puer Autosparen Feature an eiser Applikatioun hunn. Mat Auto spueren op der Applikatioun probéiert den Zoustand vun eiser Applikatioun ze späicheren all Kéier wann de Benotzer en Update mécht oder eng Interaktioun huet. Et waart 5 Sekonne fir sécher ze stellen, datt keng aner Updates oder Interaktioune gemaach gi ier de Staat gespäichert gëtt soss en den neie Staat registréiert an de Prozess widderhëlt. Wann iergendeng Interaktioun geschitt ass, reset säin Timer fir 5 Sekonnen erëm.

Funktioun entloossen (func, waitTime) {
    var Timeout;

    zréck Funktioun () {
        clearTimeout (Zäitzäit);
        timeout = setTimeout (func, waitTime);
    };
};

Dat ass et, dat ass wéi einfach Ofkenntnesser sinn.

Drossel

Dës Technik ass méi apt genannt. Eng Throttling vun enger Funktioun ass praktesch wann se kontinuéierlech opgeruff gëtt a mir wëllen datt se all x Sekonn ausféiert. E gutt Beispill vun dësem wier e Scrollhandler oder e Resize Handler, wou mir den Handler eemol an enger fixer Zäit ausféieren, och wann d'Funktioun kontinuéierlech opgeruff gëtt.

Funktiounsdrottel (func, waitTime) {
    var timeout = null;
    var virdrun = 0;

    var méi spéit = Funktioun () {
        virdrun = Date.now ();
        timeout = null;
        func ();
    };

    zréck Funktioun () {
        var elo = Date.now ();
        var bleift = Waitzäit - (elo - virdru);

        wann (bleiwen <= 0 || bleiwen> Waachzäit) {
            wann (Zäitoutfall) {
                clearTimeout (Zäitzäit);
            }
            spéider ();
        } soss wann (! timeout) {// null timeout -> keng pendent Ausféierung
            
            timeout = setTimeout (méi spéit, bleift);
        }
    };
};

Extra: Queue

Op de Linnen vun der Ofdreiwung an der Iwwerschoss kënnen d'Funktiounsaufungen och an der Schlaang waarden. An dëser Funktioun gëtt d'Zuel vun de Mol ausgeruff wéi et genannt gëtt, awer et gëtt eng fix Waardezäit virun all Ausféierung. Et koum zënter kuerzem praktesch fir mech wann ech eng Bibliothéik benotzt hunn an e Feeler koum a verschidde Funktiounen an him ruffen ouni Verzögerung war en Thema. (et kann een och aner Benotzungsfäll hunn :))

Funktiounsstrooss (func, waitTime) {
    var funcQueue = [];
    var isWaiting;

    var executeFunc = Funktioun (Params) {
        isWaiting = richteg;
        func (Params);
        setTimeout (spillen, WaitTime);
    };

    var spillen = Funktioun () {
        isWaiting = falsch;
        wann (funcQueue.length) {
            var params = funcQueue.shift ();
            exekutéierenFunc (Params);
        }
    };

    zréck Funktioun (Params) {
        wann (isWaiting) {
            funcQueue.push (Params);
        } soss {
            exekutéierenFunc (Params);
        }
    }
};

Zum Ofschloss

Ier Dir eng Optimiséierungstechnik entscheet, huelt e Schrëtt zréck a denkt wéi eng déi bescht Resultat fir deem Fall gëtt. Et gëtt ëmmer een deen méi performant ass.

Gitt Iech gratis eng Äntwert ze verloossen oder tweet mech mat all Froen oder Suggestiounen.