防抖和节流的用法（Vue）

1. 在公共方法中（如 public.js 中），加入函数防抖和节流方法

// 防抖
export function _debounce(fn, delay) {

    var delay = delay || 200;
    var timer;
    return function () {
        var th = this;
        var args = arguments;
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
        }, delay);
    };
}
// 节流
export function _throttle(fn, interval) {
    var last;
    var timer;
    var interval = interval || 200;
    return function () {
        var th = this;
        var args = arguments;
        var now = +new Date();
        if (last && now - last < interval) {
            clearTimeout(timer);
            timer = setTimeout(function () {
                last = now;
                fn.apply(th, args);
            }, interval);
        } else {
            last = now;
            fn.apply(th, args);
        }
    }
}

2. 在需要使用的组件引用

import { _debounce } from "@/utils/public"

3. 在methods中使用

  methods: {
    // 改变
    change: _debounce(function(_type, index, item) {
        // do something ...
    }, 200)
  }

防抖和节流函数的作用

防抖函数的作用就是控制函数在一定时间内的执行次数。防抖意味着 N 秒内函数只会被执行一次（最后一次），如果 N 秒内再次被触发，则重新计算延迟时间。
（类似游戏中法师的集气过程，打断施法后需要重新集气）

节流函数的作用是规定一个单位时间，在这个单位时间内最多只能触发一次函数执行，如果这个单位时间内多次触发函数，只能有一次生效。
（类似游戏中的CD，放完技能后等待CD结束才可以下次释放技能）

手写防抖和节流函数（待补充）