自定义指令实现防抖节流

自定义指令实现防抖节流

解决了什么问题？

短时间内频繁触发事件、请求，会造成后台服务器的压力、客户端浏览器的卡顿，影响用户体验。

什么是防抖？

当事件被触发之后，在N秒内不会再被执行，如果在这N秒时间内事件被触发，就重新计时，直到N秒之后，事件再次被触发；

防抖使用场景:

搜索按钮、登录、发送短信验证码、输入框的input事件；

调整浏览器的窗口大小，resize事件的频繁触发，造成浏览器计算过多；

什么是节流？

事件的触发在N秒内最多只执行一次，第一次执行之后，之后不再执行，直到下一个N秒

节流使用场景：

监听滚动事件，比如滑到底部自动加载更多

搜索框的联想搜索功能

如何实现？

使用vue实例的directive方法，结合setTimeOut延时器实现；

封装一个js文件，默认导出一个函数，在main.js文件中引入该函数，在实例挂载之前将app实例传入，函数内部实现代码：

export default (app) => {
    // 函数防抖debounce----“立即执行版本” 和 “非立即执行版本” 
    // fn 需要执行的函数
    // event 事件类型
    // delay 延迟执行时间（毫秒）
    // flag---- true 表示立即执行，false 表示非立即执行
    app.directive('debounce', (el, binding) => {
        let [fn, event = "click", delay = 2000, flag = true] = binding.value
        let timeout = null;
        el.addEventListener(event, function (e) {
            let args = arguments;
            if (timeout) {
                window.clearTimeout(timeout);
            }
            // 立即执行版本
            if (flag) {
                var callNow = !timeout;
                timeout = setTimeout(() => {
                    timeout = null;
                }, delay)
                if (callNow) fn.apply(this, args)
            } else {  //非立即执行版本
                timeout = setTimeout(() => {
                    fn.apply(this, args)
                }, delay)
            }
        })
    })

    // 函数节流throttle
    app.directive('throttle', (el, binding) => {
        let [fn, event = "click", delay = 2000] = binding.value
        let timer, timer_end;
        el.addEventListener(event, () => {
            if (timer) {
                clearTimeout(timer_end);
                return timer_end = setTimeout(() => fn(), delay);
            }
            fn();
            timer = setTimeout(() => timer = null, delay)
        })
    })
}

//使用
<el-button type="info" v-debounce="[mySearch]">搜索</el-button>