Kris Liverani surati Unsplashda

Throttle vs Queue-ni ijro etish

Internetda biz Debouncing, Throttling nima ekanligini va ular orasidagi farqni tushuntiradigan ko'plab maqolalar mavjud. Men topganlarning aksariyati uzoq, chalkash va murakkab kodli misollar bilan (agar mavjud bo'lsa) topilgan.

Shunday qilib, men ularga tushunchani jiffida olish uchun soddalashtirilgan ish kodlari misollarini keltirdim. Eng osonidan boshlaylik, Debounce.

Debounce

Agar funktsiyani to'xtatish doimiy ravishda chaqirilayotgan bo'lsa, qulaydir va agar biz oxirgi qo'ng'iroqdan keyin vaqt o'tgan bo'lsa, ma'lum vaqtdan keyin bajarilishini xohlaymiz.

Bu biz ishlashni yaxshilash uchun ishlov beruvchini chaqirishdan oldin vaziyatni barqarorlashtirishni istagan holatlarda yordam beradi. Men topilgan debyutning eng yaxshi namunalaridan biri bu blogda Jey Tompkins edi

Debouning uchun biz dasturimizda avtoulovni tejash xususiyatiga ega bo'lishimiz mumkin. Ilovani avtomatik ravishda tejash bilan foydalanuvchi har safar yangilanish yoki biron bir aloqaga ega bo'lganda dasturimiz holatini saqlab qolishga harakat qiladi. 5 soniya kutib turadi, boshqa holat yoki boshqa holatlar saqlanmasidan oldin, yangi holat qayd qilinadi va jarayonni takrorlaydi. Agar biron bir shovqin yuz bersa, u taymerni yana 5 soniya qayta o'rnatadi.

funktsiya debounce (func, waitTime) {
    var timeout;

    return funktsiya () {
        clearTimeout (kutish vaqti);
        timeout = setTimeout (func, waitTime);
    };
};

Bu shunchaki tortishuv qanchalik oddiy bo'lishi mumkinligini anglatadi.

Trotle

Ushbu uslub yanada aniq nomlangan. Har qanday funktsiyani to'xtatish doimiy ravishda chaqirilganda, yordam beradi va biz uni har soniyada har soniyada bir marta bajarilishini istaymiz. Bunga yaxshi misol bo'lishi mumkin aylantiruvchi ishlov beruvchi yoki o'lchovni qayta ishlovchi dastur, bu erda biz funktsiyani doimiy ravishda chaqirilayotgan bo'lsa ham, ishlov beruvchini belgilangan vaqt ichida bir marta bajarishni istaymiz.

funktsiya sozlamalari (func, waitTime) {
    var timeout = null;
    var old = 0;

    var keyinchalik = funktsiya () {
        oldingi = Date.now ();
        vaqt tugashi = null;
        func ();
    };

    return funktsiya () {
        var now = Date.now ();
        var qolgan = waitTime - (hozir - oldingi);
        agar (qolgan <= 0 || qolgan> kutish vaqti) {
            agar (kutish vaqti) {
                clearTimeout (kutish vaqti);
            }
            keyinroq ();
        } else if (! timeout) {// null kutish vaqti -> ijro etish kutilmoqda
            
            timeout = setTimeout (keyinroq, qolgani);
        }
    };
};

Qo'shimcha: navbat

To'xtatish va sozlash liniyalarida funktsional qo'ng'iroqlarni navbatga qo'yish ham mumkin. Ushbu funktsiya necha marta chaqiriladi, lekin har bir bajarilishdan oldin belgilangan kutish vaqti mavjud. Men yaqinda kutubxonadan foydalanganda foydalandim va unda funktsiyani chaqiradigan xatoga duch keldim, bu muammoni tezlashtirmasdan qoldirdi. (boshqa foydalanish holatlari ham bo'lishi mumkin :))

funktsiya navbati (func, waitTime) {
    var funcQueue = [];
    var is kutmoqda;

    var executeFunc = funktsiya (ustunlar) {
        isWaiting = haqiqiy;
        funktsiya (params);
        setTimeout (o'ynash, kutish vaqti);
    };

    var play = funktsiya () {
        isWaiting = noto'g'ri;
        if (funcQueue.length) {
            var params = funcQueue.shift ();
            executeFunc (parametrlar);
        }
    };

    qaytish funktsiyasi (parametrlar) {
        if (kutmoqda) {
            funcQueue.push (params);
        } else {
            executeFunc (parametrlar);
        }
    }
};

Xulosa qilmoq

Optimallashtirish texnikasi to'g'risida qaror qabul qilishdan oldin, orqaga qadam qo'ying va qaysi biri bu holda eng yaxshi natijani berishini o'ylab ko'ring. Har doim ko'proq ijro etadigan biri bor.

Iltimos, javob qoldiring yoki biron bir savol yoki taklif bilan meni tvit qiling.