防抖和节流的使用

1.为啥要防抖

有的操作是高频触发的，但是其实触发一次就好了，比如我们短时间内多次触达按钮事件，那么我们不应该每次执行操作，应该只做一次就好。再比如说监听输入框的输入，不应该每次都去触发监听，应该是用户完成一段输入后在进行触发。

2.为啥要节流

防抖存在一个问题，事件会一直等到用户完成操作后一段时间在操作，如果一直操作，会一直不触发。比如说是一个按钮，点击就发送请求，如果一直点，那么请求就会一直发布出去。这里正确的思路应该是第一次点击就发送，然后上一个请求回来后，才能再发。

节流就是减少流量，将频繁触发的事件减少，并每隔一段时间执行。即，控制事件触发的频率

3.防抖和节流的理解

防抖： 在单位时间内频繁触发事件，只有最后一次生效

节流： 在单位时间内频繁触发事件，只生效一次（也就是只有第一次生效）

4.VUE中使用

创建公共js方法，加入防抖节流方法

A.节流

// 节流触发第一次
const util = {
    throttle (fn, time) {
        // 定义的执行时间内
        if (time == null || time == undefined) {
            time = 1500
        }
        let pre = 0;
        return function () {
            const _this = this;
            // 保存调用时传来的参数
            const args = arguments;
            let now = Date.now()
            if (now - pre > time) {
                fn.apply(_this, args);
                pre = now
            }
        }
    },
}
export default util;

B.防抖

// 防抖出发最后一次
const util = {
    debounce(fn, time) {
        let delay = time || 1000;
        let timer = null;
        return function () {
            const _this = this;
            // 保存调用时传来的参数
            const args = arguments;
            // 每次事件被触发时，都清除之前的旧定时器
            if (timer) {
                clearTimeout(timer);
            }
            // 函数延迟执行
            timer = setTimeout(function () {
                fn.apply(_this, args);
            }, delay);
        };
    },
}
export default util;

C.在需要使用的组件内引用

import Util from '@/utils/util.js'
methods: {
    cartAdd:Util.throttle(function (e){
    
    },1000)
}