常用自定义指令-防抖与节流 【vue】【二】

前言

接上篇，Vue常用自定义指令-积累的魅力【VUE】

此篇文章介绍，自定义指令的防抖(Debounce)与节流（Throttle）

自定义指令

防抖指令

export default {
    install(app) {
        // 在Vue组件或Vue实例中注册自定义指令
        app.directive('debounce', {
            // 当被绑定的元素插入到DOM中时
            mounted: function (el, binding) {
                // 这里的binding.value是传递给指令的值，即你想要防抖的函数
                let timer; // 用于存储定时器的变量
                el.addEventListener('click', function () {
                    if (timer) clearTimeout(timer); // 如果定时器存在，则清除它
                    timer = setTimeout(() => {
                        binding.value(); // 执行传入的函数，实现防抖功能
                    }, 300); // 例如，延迟300毫秒执行
                });
            },
            // 当指令与元素解绑时
            unmounted: function (el) {
                // 移除事件监听器以避免内存泄漏
                el.removeEventListener('click', binding.value);
            }
        });
    }
}

节流指令

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function () {
        const context = this;
        const args = arguments;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function () {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    }
}

export default {
    install(app) {
        app.directive('throttle', {
            mounted(el, binding) {
                const handler = binding.value;
                const wait = binding.arg || 500; // 默认等待时间为500毫秒，也可以通过参数指定
                const throttledHandler = throttle(handler, wait);
                el.addEventListener('click', throttledHandler);
            },
            unmounted(el, binding) {
                const handler = binding.value;
                const wait = binding.arg || 500; // 默认等待时间为500毫秒，也可以通过参数指定
                const throttledHandler = throttle(handler, wait);
                el.removeEventListener('click', throttledHandler);
            }
        });
   }
  }