Vue自定义指令实现防抖和节流；vue实现防抖或节流

防抖和节流

前端在调动接口时，常常要控制接口的请求频率，这时我们就可以使用防抖和节流两种方式来控制。

什么是防抖和节流，两者的区别是什么

• 防抖： 防抖就是在行为触发执行一次后，需静默等待N秒后才能再次执行，在此期间不能再触发行为，如果重复触发就计时归零后再次计时，直到用户静默到设定的阈值才再次执行。简而言之就是触发后N秒内不许触发，直到N秒后才可以执行。
• 节流： 节流就是N秒内只执行一次，不管在N秒内重复调用了多少次，也只执行一次。

注：以下是在VUE中以自定义指令形式实现的防抖和节流，是笔者按照自己的想法来实现的，可优化。

1、首先创建防抖节流JS文件

import Vue from "vue"

// 防抖
Vue.directive('shake', {
  inserted(el, binding) {
    let {
      fn,
      event = "click",
      delay = 800
    } = binding.value;
    let timerA = null;
    el.addEventListener(
      event,
      () => {
        if (timerA) {
          clearTimeout(timerA)
          timerA = null
          timerA = setTimeout(() => {
            fn.apply(this, arguments);
            clearTimeout(timerA)
            timerA = null
          }, delay);
        } else {
          fn.apply(this, arguments);
          timerA = setTimeout(() => {
            clearTimeout(timerA)
            timerA = null
          }, delay);
        }
      },
      false
    );
  },
});

// 节流
Vue.directive('throttling', {
  inserted(el, binding) {
    let {
      fn,
      event = "click",
      delay = 800
    } = binding.value;
    let timerB = null;
    let flag = true
    el.addEventListener(event, () => {
      if (flag) {
        flag = false
        fn.apply(this, arguments);
        timerB = setTimeout(() => {
          flag = true
          clearTimeout(timerB);
          timerB = null
        }, delay);
      }
    });
  },
});

2、然后在main.js中引入

import "@/util/shakeAndThrottling.js"

3、使用示例

 <el-button primary
               v-throttling="{fn:changeTestObj,event:'click',delay:2000}">加 + 加</el-button>

注：如果有看不懂的再认真看一遍就懂了。