Unsplash-də Chris Liverani-nin şəkli

Throttle vs Queue icrasına qarşı çıxın

İnternetdə Debouncing, Throttling nədir və aralarındakı fərqin nə olduğunu izah edən çox sayda məqalə var. Ancaq tapdığımların əksəriyyəti uzun, qarışıq və mürəkkəb kod nümunələri ilə (əgər varsa) tapıldı.

Beləliklə, konsepsiyanı bir jiffydə əldə etmək üçün onlar üçün sadələşdirilmiş iş kodu nümunələri ilə tanış oldum. Daha asanlıqla başlayın, Debounce.

Debounce

Bir funksiyanın dayandırılması davamlı səsləndikdə əlverişli olur və son zəngdən bəri vaxt keçdikdə müəyyən bir müddətdən sonra yerinə yetirilməsini istəyirik.

Vəziyyəti yaxşılaşdırmaq üçün işleyicini çağırmadan əvvəl vəziyyətin sabitləşməsini istədiyimiz hallarda kömək edir. Tapdığım debounce ən yaxşı nümunələrindən biri Jhey Tompkins tərəfindən bu blogda tapıldı

Debouncing üçün tətbiqetməmizdə bir az avtomatik qazanc xüsusiyyəti ola bilər. Tətbiqə avtomatik qənaət etməklə istifadəçi hər dəfə bir yeniləmə etdikdə və ya bir az qarşılıqlı əlaqə yaratdıqda tətbiq vəziyyətimizi saxlamağa çalışır. 5 saniyə gözləyir, başqa bir yeniləmənin və ya qarşılıqlı əlaqənin qurulmamışdan əvvəl yeni vəziyyəti qeyd etməsi və təkrarladığı vəziyyətdən əmin olmaması üçün 5 saniyə gözləyir. Hər hansı bir qarşılıqlı əlaqə baş verərsə, o zaman taymeri yenidən 5 saniyə yenidən qurur.

funksiya debounce (func, waitTime) {
    var fasiləsi;

    return funksiyası () {
        ClearTimeout (fasiləsizlik);
        timeout = setTimeout (func, waitTime);
    };
};

Bu, sadə debounce ola biləcəyini göstərir.

Qəza

Bu üsul daha dəqiq adlandırılmışdır. Bir funksiyanı əzmək davamlı olaraq çağırıldıqda əlverişli olur və onun hər x saniyədə bir dəfə yerinə yetirilməsini istəyirik. Bunun yaxşı bir nümunəsi bir gediş işleyicisi və ya boyutlandırma işleyicisi ola bilər, funksiya davamlı olaraq çağırıldığı təqdirdə müəyyən bir müddət ərzində işleyicini bir dəfə icra etmək istədiyimiz yer.

funksiya boğazı (func, waitTime) {
    var timeout = null;
    var əvvəlki = 0;

    var sonra = funksiya () {
        əvvəlki = Tarix.now ();
        zaman aşımı = null;
        func ();
    };

    return funksiyası () {
        var indi = Tarix.now ();
        var qalan = waitTime - (indi - əvvəlki);
        əgər (qalan <= 0 || qalan> gözləmə müddəti) {
            əgər (zaman aşımı) {
                clearTimeout (fasiləsizlik);
            }
            daha sonra ();
        } else if (! timeout) {// null fasiləsi -> gözləyən icra yoxdur
            
            timeout = setTimeout (sonradan, qalan);
        }
    };
};

Əlavə: növbə

Alınma və tənzimləmə xətlərində, funksiya zəngləri də növbəyə qoyula bilər. Bu funksiya çağırıldığı dəfələrlə yerinə yetirilir, lakin hər bir icradan əvvəl sabit bir gözləmə müddəti var. Bir kitabxanadan istifadə edərkən yaxın vaxtlarda mənim üçün əlverişli oldu və gecikmədən bir neçə dəfə bir funksiyanı çağıran bir səhvə qaçdım. (başqa istifadə halları da ola bilər :))

funksiya növbəsi (func, waitTime) {
    var funcQueue = [];
    var is gözləyir;

    var executeFunc = funksiya (params) {
        isWaiting = doğrudur;
        func (params);
        setTimeout (oynamaq, gözləyinTime);
    };

    var play = funksiya () {
        isWaiting = saxta;
        əgər (funcQueue.length) {
            var params = funcQueue.shift ();
            executeFunc (parametrlər);
        }
    };

    qaytarma funksiyası (params) {
        əgər (gözləyir) {
            funcQueue.push (params);
        } başqa {
            executeFunc (parametrlər);
        }
    }
};

Nəticə etmək

Bir optimallaşdırma texnikasına qərar verməzdən əvvəl geri addım atın və hansının bu iş üçün ən yaxşı nəticə verəcəyini düşünün. Daha çox ifaçı olacaq həmişə var.

Xahiş edirəm bir cavab buraxın və ya hər hansı bir sualınız və ya təklifinizlə mənə tvit verin.