vue+element-自定义指令，防止重复提交及重复发送http请求；节流throttle与防抖debounce举例说明

• 方法一、控制标签 

全局directive的写法
// 提交以后禁用按钮一段时间，防止重复提交
import Vue from 'vue';
Vue.directive('noMoreClick', {
  inserted(el, binding) {
    el.addEventListener('click', e => {
      el.classList.add('is-disabled');
      el.disabled = true;
      setTimeout(() => {
        el.disabled = false;
        el.classList.remove('is-disabled');
      }, 3000)
    })
  }
});

局部directive的写法
directives:{
      noMoreClick: {
        inserted(el, binding) {
          el.addEventListener('click', () => {
            el.classList.add('is-disabled');
            el.disabled = true;
            setTimeout(() => {
              el.disabled = false;
              el.classList.remove('is-disabled');
            }, 2000)
          })
        }
      }
    },

使用：

<el-button size="small" class="clear-btn m-t-sm m-b-sm" @click="resetForm" v-no-more-click>
  Confirm
</el-button>

•  方法二、控制JS

使用这个，首先应该对Lodash.js有一定的了解，（打开链接，搜索debounce即可查看相应文档）

_.debounce(func, [wait=0], [options={}])

创建一个 debounced（防抖动）函数，该函数会从上一次被调用后，延迟 wait 毫秒后调用 func 方法。 debounced（防抖动）函数提供一个 cancel 方法取消延迟的函数调用以及 flush 方法立即调用。 可以提供一个 options（选项） 对象决定如何调用 func 方法，options.leading 与|或 options.trailing 决定延迟前后如何触发（愚人码头注：是 先调用后等待 还是 先等待后调用）。 func 调用时会传入最后一次提供给 debounced（防抖动）函数 的参数。 后续调用的 debounced（防抖动）函数返回是最后一次 func 调用的结果。 

methods:{   
    // 触发事件
     clickMe(){
		this.getData('111')；
	},
	getData: _.debounce(function(value){
		console.log(value);//2秒后打印'111'
	},2000)
}

 

防抖动原理：

• 1、debounce

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);
    };
}

我们调用debounce的时候，它运行返回一个function，这个function使用外面的局部变量delay和timer。这个返回的function才是事件执行的回调。每次执行的时候判断timer是否有值，有值则clearTimeout清空定时器，并且重新开启定时器，直到delay时间内没有触发事件时才会真正执行事件的回调。

• 2、throttle实现

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);
        }
    }
}

使用方法跟debounce一样。代码逻辑也类似。在触发时超过间隔时间interval ms则执行。否则不执行。if判断中的setTimeout是保证最后一次事件触发后能够调用，所以每次执行没到间隔时间时先清除timer，再重新启动timer。而在达到间隔时间时执行函数。

• 防抖动与节流的区别

防抖动就是，在多次触发时（不间断点击N秒），点击停止3秒后触发函数 （常用于keydown事件上验证用户名等）

  // 函数防抖
  let timer = false;
  document.getElementById("throttle").onclick = function(){
    clearTimeout(timer);
    timer = setTimeout(()=>{
      console.log("执行买的http请求");
      console.log(timer);
    },2000)
  };

节流是，在多次触发时（不间断点击N秒），每隔3秒触发一次函数，常用于resize改变布局，scroll滚动事件等

  // 函数节流
  let flag = true;
  document.getElementById("throttle").onclick = function(){
    console.log("买");
    if(!flag){
      return
    }
    flag = false;
    setTimeout(()=>{
      flag = true;
      console.log("执行买的http请求")
    },2000)
  };