防抖与节流

我演示的dome是基于vue框架的

1，定义

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间
节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
区别：防抖动和节流本质是不一样的。防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

2，为什么使用？

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 scroll、mousemove，onmouseover 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。

通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。

防抖和节流严格算起来应该属于性能优化的知识，但实际上遇到的频率相当高，处理不当或者放任不管就容易引起浏览器卡死。

3，使用场景

git.gif

当滚动调滚动时，会一直触发事件，我们不想事件频繁触发，如果调后台接口，后台会直接奔溃的，解决方法出现了 —— 防抖与节流

4，文件的配置

export default {
  data() {
    return {
      scrollTopValue: ""
    };
  },
  mounted() {// 通过这里进行调用
    window.onscroll = ("scroll", this.debounce(this.scrollTop, 200));
  },
  methods: {// 此处，是调用事件的方法debounce，在下面展示
    scrollTop() {
      this.scrollTopValue = document.body.scrollTop || document.documentElement.scrollTop;
      console.log("我是scroll事件" + this.scrollTopValue);
    }
  }
};

5，使用方法

1，防抖（debounce）：`防抖函数分为立即执行与非立即执行`

语法：debounce（fn，wait）

fn：要防抖执行的函数
wait：防抖等待的时间
immediate: true 表立即执行，false 表非立即执行

用法（立即执行）

debounce(fn, interval) {
      let timeout;
      return function() {
        let ctx = this;
        let args = arguments;

        if (timeout) clearTimeout(timeout);

        timeout = setTimeout(() => {
          fn.apply(ctx, args);
        }, interval);
    }
}

用法（立即执行与非立即执行）

debounce(func,wait,immediate) {
        let timeout;

        return function () {
            let context = this;
            let args = arguments;

            if (timeout) clearTimeout(timeout);
            if (immediate) {
                var callNow = !timeout; // true
                timeout = setTimeout(() => {
                    timeout = null;
                }, wait)
                if (callNow) func.apply(context, args)
            } else {
                timeout = setTimeout(function(){
                    func.apply(context, args)
                }, wait);
            }
        }
}

上述防抖函数的代码还需要注意的是 this 和参数的传递

let context = this;
let args = arguments;

防抖函数的代码使用这两行代码来获取 this 和参数，是为了让 debounce 函数最终返回的函数 this 指向不变以及依旧能接受到 e 参数。

2，节流（时间戳和定时器）

语法：throttle（fn，wait）

fn：要防抖执行的函数
wait：防抖等待的时间

用法（时间戳）

mounted() {
    window.onscroll = ("scroll", this.throttle(this.scrollTop, 0));
}

throttle(fn, interval) {
      let last = 0;
      return function() {
        let ctx = this;
        let args = arguments;

        let now = new Date();
        if (now - last > interval) {
          last = now;
          fn.apply(ctx, args);
        }
      };
}

用法（定时器）

throttle(fn, interval) { // 定时器
      let timeOut;
      return function() {
        let ctx = this;
        let args = arguments;

        if (!timeOut) {// 如果没有定时器
          timeOut = setTimeout(() => {//在interval时间后，进行事件
            timeOut = null;
            fn.apply(ctx, args);
          }, interval);
        }
      };
    },