ຮູບພາບໂດຍ Chris Liverani ໃນ Unsplash

Debounce vs Throttle vs ການປະຕິບັດຄິວ

ພວກເຮົາມີບັນດາບົດຂຽນຕ່າງໆໃນອິນເຕີເນັດທີ່ອະທິບາຍວ່າ Debouncing, Throttling ແມ່ນຫຍັງແລະຄວາມແຕກຕ່າງລະຫວ່າງພວກມັນແມ່ນຫຍັງ. ແຕ່ຂ້ອຍພົບເຫັນສ່ວນຫຼາຍມັກຈະຍາວ, ສັບສົນແລະມີຕົວຢ່າງລະຫັດທີ່ສັບສົນ (ຖ້າມີ).

ສະນັ້ນຂ້າພະເຈົ້າໄດ້ມີຕົວຢ່າງລະຫັດການເຮັດວຽກແບບງ່າຍດາຍ ສຳ ລັບພວກເຂົາເພື່ອໃຫ້ໄດ້ແນວຄວາມຄິດທີ່ ໜ້າ ສົນໃຈ. ສາມາດເຮັດໃຫ້ເລີ່ມຕົ້ນດ້ວຍງ່າຍທີ່ສຸດ, Debounce.

ການໂຕ້ວາທີ

ການປະຕິບັດ ໜ້າ ທີ່ຈະຫຼຸດລົງໃນເວລາທີ່ມັນຖືກເອີ້ນຢ່າງຕໍ່ເນື່ອງແລະພວກເຮົາຕ້ອງການໃຫ້ມັນປະຕິບັດພາຍຫຼັງໄລຍະເວລາທີ່ແນ່ນອນຖ້າເວລາຜ່ານໄປນັບຕັ້ງແຕ່ການໂທຄັ້ງສຸດທ້າຍ.

ນີ້ມີປະໂຫຍດໃນກໍລະນີທີ່ພວກເຮົາຕ້ອງການໃຫ້ສະຖານະການມີສະຖຽນລະພາບກ່ອນທີ່ຈະໂທຫາຜູ້ຈັດການເພື່ອປັບປຸງການປະຕິບັດງານ. ຕົວຢ່າງ ໜຶ່ງ ທີ່ດີທີ່ສຸດຂອງການປ່ອຍຕົວທີ່ຂ້ອຍພົບແມ່ນຢູ່ໃນ blog ນີ້ໂດຍ Jhey Tompkins

ສຳ ລັບການຖົກຖຽງ, ພວກເຮົາສາມາດມີຄຸນສົມບັດຊ່ວຍປະຢັດອັດຕະໂນມັດໃນໂປແກຼມຂອງພວກເຮົາ. ດ້ວຍການປະຫຍັດອັດຕະໂນມັດໃນແອັບພລິເຄຊັນພະຍາຍາມປະຫຍັດສະພາບການຂອງແອັບພລິເຄຊັນຂອງພວກເຮົາທຸກໆຄັ້ງທີ່ຜູ້ໃຊ້ເຮັດການອັບເດດຫລືມີປະຕິ ສຳ ພັນບາງຢ່າງ. ມັນລໍຖ້າ 5 ວິນາທີເພື່ອໃຫ້ແນ່ໃຈວ່າບໍ່ມີການປັບປຸງຫລືໂຕ້ຕອບອື່ນໆກ່ອນທີ່ຈະປະຢັດສະຖານະການອື່ນທີ່ມັນບັນທຶກສະຖານະການ ໃໝ່ ແລະເຮັດຊ້ ຳ ຂັ້ນຕອນ. ຖ້າມີການໂຕ້ຕອບໃດໆເກີດຂື້ນມັນຈະຈັບເວລາຂອງມັນເປັນເວລາ 5 ວິນາທີ.

ເຮັດວຽກ debounce (func, waitTime) {
    var timeout;

    ກັບຄືນຫນ້າທີ່ () {
        clearTimeout (ໝົດ ເວລາ);
        timeout = setTimeout (func, ລໍຖ້າເວລາ);
    };
};

ມັນແມ່ນ, ວ່າວິທີການ debounce ງ່າຍດາຍສາມາດຈະ.

ຕີບ

ເຕັກນິກນີ້ແມ່ນມີຊື່ ເໝາະ ສົມກວ່າ. ການປິດ ໜ້າ ທີ່ການເຮັດວຽກແມ່ນມີປະໂຫຍດເມື່ອມັນຖືກເອີ້ນຢ່າງຕໍ່ເນື່ອງແລະພວກເຮົາຕ້ອງການໃຫ້ມັນປະຕິບັດທຸກໆວິນາທີ x ວິນາທີ. ຕົວຢ່າງທີ່ດີຂອງສິ່ງນີ້ອາດຈະແມ່ນຜູ້ຈັດການເລື່ອນຫລືຜູ້ຈັດຂະ ໜາດ, ບ່ອນທີ່ພວກເຮົາຕ້ອງການຈັດການຜູ້ຈັດການ ໜຶ່ງ ຄັ້ງໃນໄລຍະເວລາທີ່ ກຳ ນົດ, ເຖິງແມ່ນວ່າ ໜ້າ ທີ່ຈະຖືກເອີ້ນຢ່າງຕໍ່ເນື່ອງ.

ຟັງຊັ່ນ ທຳ ງານ (func, waitTime) {
    var timeout = null;
    var ທີ່ຜ່ານມາ = 0;

    var later = function () {
        ທີ່ຜ່ານມາ = Date.now ();
        timeout = null;
        func ();
    };

    ກັບຄືນຫນ້າທີ່ () {
        var ດຽວນີ້ = Date.now ();
        var ທີ່ເຫຼືອ = ລໍຖ້າເວລາ - (ດຽວນີ້ - ກ່ອນ ໜ້າ ນີ້);
        ຖ້າ (ຍັງເຫຼືອ <= 0 || ຍັງເຫຼືອ> ລໍຖ້າເວລາ) {
            ຖ້າ (ໝົດ ເວລາ) {
                clearTimeout (ໝົດ ເວລາ);
            }
            ຕໍ່ມາ ();
        } ອີກຢ່າງ ໜຶ່ງ ຖ້າ (! ໝົດ ເວລາ) {// ເວລາ ໝົດ ເວລາ -> ບໍ່ມີການປະຕິບັດທີ່ຍັງຄ້າງຢູ່
            
            timeout = setTimeout (ຕໍ່ມາ, ຍັງເຫຼືອ);
        }
    };
};

ພິເສດ: ຄິວ

ໃນສາຍຂອງການຖົກຖຽງແລະການປິດສຽງ, ການໂທຫາການເຮັດວຽກສາມາດເປັນແຖວເຊັ່ນກັນ. ໃນ ໜ້າ ທີ່ນີ້ຈະຖືກປະຕິບັດ ຈຳ ນວນຄັ້ງທີ່ມັນຖືກເອີ້ນແຕ່ວ່າມີເວລາລໍຖ້າຄົງທີ່ກ່ອນການປະຕິບັດແຕ່ລະຄັ້ງ. ມັນມາຮອດປະຈຸບັນ ສຳ ລັບຂ້ອຍເມື່ອຂ້ອຍ ກຳ ລັງໃຊ້ຫ້ອງສະມຸດແລະແລ່ນເຂົ້າໄປໃນຂໍ້ບົກພ່ອງທີ່ເອີ້ນຟັງຊັນຢູ່ໃນມັນຫລາຍຄັ້ງໂດຍບໍ່ມີການລ່າຊ້າເຮັດໃຫ້ເກີດບັນຫາ. (ມັນສາມາດມີກໍລະນີການ ນຳ ໃຊ້ອື່ນອີກເຊັ່ນກັນ :))

ແຖວ ໜ້າ ທີ່ເຮັດວຽກ (func, waitTime) {
    var funcQueue = [];
    var isWaiting;

    var executeFunc = ໜ້າ ທີ່ (params) {
        isWaiting = ຄວາມຈິງ;
        func (params);
        setTimeout (ຫຼີ້ນ, ເວລາລໍຖ້າ);
    };

    var play = function () {
        isWaiting = ບໍ່ຖືກຕ້ອງ;
        ຖ້າ (funcQueue.length) {
            var params = funcQueue.shift ();
            executeFunc (params);
        }
    };

    ກັບຄືນຫນ້າທີ່ (ແມ່ພະຍາດ) {
        ຖ້າ (isWaiting) {
            funcQueue.push (params);
        } ອີກ {
            executeFunc (params);
        }
    }
};

ເພື່ອສະຫຼຸບ

ກ່ອນທີ່ທ່ານຈະຕັດສິນໃຈກ່ຽວກັບເຕັກນິກການເພີ່ມປະສິດທິພາບ, ຈົ່ງກ້າວຕໍ່ໄປແລະຄິດວ່າອັນໃດຈະໃຫ້ຜົນດີທີ່ສຸດ ສຳ ລັບກໍລະນີດັ່ງກ່າວ. ມັນມີສະເຫມີຫນຶ່ງທີ່ຈະມີການສະແດງຫຼາຍ.

ກະລຸນາຮູ້ສຶກວ່າບໍ່ເສຍຄ່າທີ່ຈະອອກ ຄຳ ຕອບຫລື tweet ຂ້ອຍດ້ວຍ ຄຳ ຖາມຫຼື ຄຳ ແນະ ນຳ ໃດໆ.