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

1. 防暴点（preventReClick）

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

export default {
    install(Vue) {
        Vue.directive('preventReClick', {
            inserted: function (el, binding) {
                console.log(el.disabled)
                el.addEventListener('click', (e) => {
                    if (!el.disabled) {
                        el.disabled = true
                        setTimeout(() => {
                            el.disabled = false
                        }, binding.value || 3000)
                        //binding.value可以自行设置。如果设置了则跟着设置的时间走
                        //例如：v-preventReClick='500'
                    } else { // disabled为true时，阻止默认的@click事件
                        e.preventDefault()
                        e.stopPropagation()
                    }
                })
            }
        }),
    }


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

2.在main.js中全局引用

// 防止多次点击
import preventReClick from '@/util/preventReClick '
Vue.use(preventReClick);
1
2
3

3.在触发事件的按钮上就可以直接使用指令(button按钮和其他元素都可)

<div class="comment-btn" @click="submitMes()" v-preventReClick="3000">发送</div>
<el-button @click="submitMes()" v-preventReClick="3000">发送</el-button>
1
2

2. 防抖（debounce）

用户停下操作，就执行函数；只要不停止操作，永远不会执行函数内的操作
使用场景：防抖常应用于用户进行搜索输入节约请求资源，
eg：原来watch用户输入值改变马上请求接口 ，加入防抖，停止输入操作才会对接口进行访问

/**
 * @description 函数防抖 触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。
 * @param {Function} func 需要执行的函数
 * @param {Number} wait 间隔时间 默认200ms
 * @param {Boolean} immediate  是否立即执行 true(默认) 表立即执行，false 表非立即执行
 * @return {*}
 */
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);
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

用法：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

3. 节流（throttle）

高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率，是个固定的过程 ，如限制1s，则1s内只执行一次，无论怎样，都在会1s内执行相应的操作

使用场景：和防抖使用场景差不多，关键看固定时间内（1s）需要反馈，需要反馈使用节流，即：无论用户是否停下操作，都会固定时间执行函数操作

 * @description 函数节流
 * @param {Function} func 函数
 * @param {Number} wait 延迟执行毫秒数,默认200
 * @param {Number} type 1 表时间戳版，2 表定时器版
 */
export 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)
            }
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

用法：

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

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


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15