Vue 编写(preventReClick)防暴点 +防抖（debounce）和节流（throttle）函数

之前有试过几种都没有其效果原因：

1.vue写法与普通有点差异，因为vue的this不仅仅是当前的组件对象，还往上继承了vue对象（下文可以看出差异）
2.call ,apply都只能继承父级，并不能深度继承
3.因为深度继承需要递归或者多层嵌套函数，代码量大且难维护，因此推荐下方方法

1.防暴点（preventReClick）

问题：快速点击按钮时会频繁重复调用接口，为了防止这种情况，要对相应的按钮进行防暴力重复点击处理，最好是使用函数防抖或者函数截流来处理，但是现在已经要修改的按钮太多了，于是换一种方法，用指令的方式来达到相识的效果。

1.创建utils文件夹，在该文件夹下创建preventReClick.js文件

import Vue from 'vue'
// 在vue上挂载一个指量 preventReClick
const preventReClick = Vue.directive('preventReClick', {inserted: function (el, binding) {console.log(el.disabled)el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, binding.value || 3000)//binding.value可以自行设置。如果设置了则跟着设置的时间走//例如：v-preventReClick='500'}})}
});
export { preventReClick }

2.在main.js中全局引用

import './utils/preventReClick.js'

3.在button组件中直接使用 v-preventReClick 指令

 <a-button type="primary" @click="handleSubmit" v-preventReClick >保存</a-button>

1.防抖（debounce）

含义：
用户停下操作，就执行函数；只要不停止操作，永远不会执行函数内的操作

使用场景：防抖常应用于用户进行搜索输入节约请求资源，
如：原来watch用户输入值改变马上请求接口，加入防抖，停止输入操作才会对接口进行访问
代码：

/*** @description 函数防抖 触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。* @param {Function} func 需要执行的函数* @param {Number} wait 间隔时间 默认200ms* @param {Boolean} immediate  是否立即执行 true(默认) 表立即执行，false 表非立即执行* @return {*}* @author liuxin*/
export function VueDebounce(func, wait = 200, immediate = true) {let timeout = null;  // 定时器return function () {let that = this, // this对象args = arguments; // 参数if (timeout) clearTimeout(timeout);if (immediate === true) { // 立即执行var callNow = !timeout;timeout = setTimeout(() => {timeout = null;}, wait)if (callNow) {// func.apply(that, args); // 普通用法that[func](...args); // vue用法}}else { // 非立即执行timeout = setTimeout(() => {// func.apply(this, args); // 普通用法that[func](...args); // vue用法}, wait);}}
}

用法：

methods: {/*** 点击事件 函数防抖* 用法：<el-button @click="debounceHandel">点击测试</el-button>*/debounceHandel: VueDebounce("handlerFunc"),/*** 点击事件：真正执行的函数*/handlerFunc(type) {console.log("测试防抖事件");this.$emit("click","这是参数"); // 如果用普通用法，则这里会找不到$emit，因为this还往上继承了vue的对象},}

2.节流（throttle）

含义：高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率。。是个固定的过程，如限制1s，则1s内只执行一次，无论怎样，都在会1s内执行相应的操作
使用场景：和防抖使用场景差不多，关键看固定时间内（1s）需要反馈，需要反馈使用节流，即：无论用户是否停下操作，都会固定时间执行函数操作
代码：用法与函数防抖一致
/**

 * @description 函数节流* @param {Function} func 函数* @param {Number} wait 延迟执行毫秒数,默认200* @param {Number} type 1 表时间戳版，2 表定时器版*/
function VueThrottle(func, wait=200 ,type) {if(type===1){let previous = 0;}else if(type===2){let timeout;}return function() {let that= this;let args = arguments;if(type===1){let now = Date.now();if (now - previous > wait) {// func.apply(that, args); // 普通用法that[func](...args); // vue用法previous = now;}}else if(type===2){if (!timeout) {timeout = setTimeout(() => {timeout = null;// func.apply(that, args)that[func](...args); // vue用法}, wait)}}}
}

部分原文

loadsh插件防抖和节流

安装lodash插件，该插件提供了防抖和节流的函数，我们可以引入js文件，直接调用。当然也可以自己写防抖和节流的函数
lodash官网
防抖：用户操作很频繁，但是只执行一次，减少业务负担。
节流：用户操作很频繁，但是把频繁的操作变为少量的操作，使浏览器有充分时间解析代码
防抖和节流简述
例如：下面代码就是将changeIndex设置了节流，如果操作很频繁，限制50ms执行一次。这里函数定义采用的键值对形式。throttle的返回值就是一个函数，所以直接键值对赋值就可以，函数的参数在function中传入即可。

import {throttle} from 'lodash'methods: {//鼠标进入修改响应元素的背景颜色//采用键值对形式创建函数，将changeIndex定义为节流函数，该函数触发很频繁时，设置50ms才会执行一次changeIndex: throttle(function (index){this.currentIndex = index},50),//鼠标移除触发时间leaveIndex(){this.currentIndex = -1}}