Fotografie de Chris Liverani pe Unsplash

Debounce vs Throttle vs Execuția cozii

Avem o mulțime de articole pe internet care explică ce sunt dezbaterile, accelerarea și care este diferența dintre ele. Dar majoritatea pe care le-am găsit au fost deseori lungi, confuze și cu exemple de cod complicate (dacă există).

Așa că am venit cu exemple de cod de lucru simplificate pentru ca aceștia să capete conceptul în mod clar. Să începem cu cea mai ușoară, Debounce.

debounce

Depunerea unei funcții este utilă atunci când este apelată continuu și dorim ca aceasta să fie executată după o anumită perioadă, dacă a trecut timpul de la ultimul apel.

Acest lucru este util în cazurile în care dorim să se stabilizeze situația înainte de a apela la manipulator pentru a îmbunătăți performanța. Unul dintre cele mai bune exemple de dezbateri pe care le-am găsit a fost în acest blog de Jhey Tompkins

Pentru dezbateri, am putea avea o aplicație de salvare automată în aplicația noastră. Cu salvarea automată a aplicației se încearcă salvarea stării aplicației noastre de fiecare dată când utilizatorul face o actualizare sau are o interacțiune. Așteaptă 5 secunde pentru a vă asigura că nu se realizează alte actualizări sau interacțiuni înainte de a salva starea în care înregistrează noua stare și repetă procesul. Dacă se întâmplă vreo interacțiune, își resetează cronometrul timp de 5 secunde.

funcție declin (func, waitTime) {
    interval de timp var;

    functie returnare () {
        clearTimeout (timeout);
        timeout = setTimeout (func, waitTime);
    };
};

Asta e, cât de simplu poate fi un declin.

regulator

Această tehnică este mai bine numită. Accelerarea unei funcții vine la îndemână atunci când este apelată continuu și vrem să se execute o dată la fiecare x secunde. Un bun exemplu în acest sens ar fi un handler de defilare sau un redimensionator, unde dorim să executăm handler-ul o dată într-o perioadă de timp determinată, chiar dacă funcția este apelată continuu.

function throttle (func, waitTime) {
    var timeout = nul;
    var anterior = 0;

    var ulterior = function () {
        precedent = Date.now ();
        timeout = nul;
        func ();
    };

    functie returnare () {
        var acum = Date.now ();
        var rămase = waitTime - (acum - anterior);
        if (rămânând <= 0 || rămas> waitTime) {
            if (timeout) {
                clearTimeout (timeout);
            }
            mai tarziu();
        } else if (! timeout) {// null timeout -> nicio execuție pendinte
            
            timeout = setTimeout (mai târziu, rămânând);
        }
    };
};

În plus: Coada

Pe liniile de deconectare și accelerație, apelurile funcționale pot fi, de asemenea, în coadă. În acest lucru funcția este executată de câte ori este apelată, dar există un timp de așteptare fix înainte de fiecare execuție. Mi-a venit la îndemână recent pentru mine când foloseam o bibliotecă și am intrat într-o eroare care numea o funcție în ea de mai multe ori, fără ca întârziere să provoace o problemă. (pot exista și alte cazuri de utilizare :))

funcție de coadă (func, waitTime) {
    var funcQueue = [];
    var este de așteptare;

    var executeFunc = funcție (parame) {
        isWaiting = true;
        func (params);
        setTimeout (redare, waitTime);
    };

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

    functie returnare (parame) {
        if (isWiting) {
            funcQueue.push (params);
        } altfel {
            executeFunc (params);
        }
    }
};

A concluziona

Înainte de a vă decide asupra unei tehnici de optimizare, faceți un pas înapoi și gândiți-vă care dintre acestea va da cel mai bun rezultat pentru acest caz. Există întotdeauna unul care va fi mai performant.

Vă rugăm să nu ezitați să lăsați un răspuns sau să îmi trimiteți un tweet cu întrebări sau sugestii.