标题：Vue (preventReClick)防暴点 +防抖（debounce）和节流（throttle）函数
出处：刘新修
时间：Wed, 27 Sep 2023 18:49:06 +0000
作者：刘新修
地址：http://pic1.liuxinxiu.com:80/s/330/
内容：
1. 防暴点（preventReClick）
快速点击按钮时会频繁重复调用接口，为了防止这种情况，要对相应的按钮进行防暴力重复点击处理，最好是使用函数防抖或者函数截流来处理，但是现在已经要修改的按钮太多了，于是换一种方法，用指令的方式来达到相识的效果。
1.创建utils文件夹，在该文件夹下创建preventReClick.js文件
JavaScript代码
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中全局引用
JavaScript代码
// 防止多次点击 import preventReClick from '@/util/preventReClick ' Vue.use(preventReClick);
3.在触发事件的按钮上就可以直接使用指令(button按钮和其他元素都可)
JavaScript代码
发送
2. 防抖（debounce）用户停下操作，就执行函数；只要不停止操作，永远不会执行函数内的操作使用场景：防抖常应用于用户进行搜索输入节约请求资源，eg：原来watch用户输入值改变马上请求接口 ，加入防抖，停止输入操作才会对接口进行访问
JavaScript代码
/** * @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); } } }
用法：
JavaScript代码
import {VueDebounce} from "@/util/index" methods: { /** * 点击事件 函数防抖 * 用法：点击测试 */ debounceHandel: VueDebounce("handlerFunc"), /** * 点击事件：真正执行的函数 */ handlerFunc(type) { console.log("测试防抖事件"); this.$emit("click","这是参数"); // 如果用普通用法，则这里会找不到$emit，因为this还往上继承了vue的对象 }, }
3. 节流（throttle）
高频时间触发,但n秒内只会执行一次,所以节流会稀释函数的执行频率，是个固定的过程 ，如限制1s，则1s内只执行一次，无论怎样，都在会1s内执行相应的操作
使用场景：和防抖使用场景差不多，关键看固定时间内（1s）需要反馈，需要反馈使用节流，即：无论用户是否停下操作，都会固定时间执行函数操作
JavaScript代码
* @description 函数节流 * @param {Function} func 函数 * @param {Number} wait 延迟执行毫秒数,默认200 * @param {Number} type 1 表时间戳版，2 表定时器版 */ xport 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) } } }
用法：
JavaScript代码
import {VueThrottle} from "@/util/index" methods: { /** * 点击事件 函数防抖 * 用法：点击测试 */ throttleHandel: VueThrottle("handlerFunc"), /** * 点击事件：真正执行的函数 */ handlerFunc(type) { console.log("测试防抖事件"); this.$emit("click","这是参数"); // 如果用普通用法，则这里会找不到$emit，因为this还往上继承了vue的对象 }, }
Generated by Bo-blog 2.1.1 Release