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()
}
})
}
}),
}
2.在main.js中全局引用
// 防止多次点击
import preventReClick from '@/util/preventReClick '
Vue.use(preventReClick);
3.在触发事件的按钮上就可以直接使用指令(button按钮和其他元素都可)
<div class="comment-btn" @click="submitMes()" v-preventReClick="3000">发送</div>
<el-button @click="submitMes()" v-preventReClick="3000">发送</el-button>
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);
}
}
}
用法:
import {VueDebounce} from "@/util/index"
methods: {
/**
* 点击事件 函数防抖
* 用法:<el-button @click="debounceHandel">点击测试</el-button>
*/
debounceHandel: VueDebounce("handlerFunc"),
/**
* 点击事件:真正执行的函数
*/
handlerFunc(type) {
console.log("测试防抖事件");
this.$emit("click","这是参数"); // 如果用普通用法,则这里会找不到$emit,因为this还往上继承了vue的对象
},
}
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)
}
}
}
}
用法:
import {VueThrottle} from "@/util/index"
methods: {
/**
* 点击事件 函数防抖
* 用法:<el-button @click="throttleHandel">点击测试</el-button>
*/
throttleHandel: VueThrottle("handlerFunc"),
/**
* 点击事件:真正执行的函数
*/
handlerFunc(type) {
console.log("测试防抖事件");
this.$emit("click","这是参数"); // 如果用普通用法,则这里会找不到$emit,因为this还往上继承了vue的对象
},
}
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
}
}