2023/09 归档 - 刘新修 - 刘新修的个人博客 (Liuxinxiu'S Blog)

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

[

2023/09/27 18:49 | by 刘新修 ]

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代码

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

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: {
/**
* 点击事件函数防抖
* 用法：<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）需要反馈，需要反馈使用节流，即：无论用户是否停下操作，都会固定时间执行函数操作

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

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1892)

蓝盾发布平台，查看当前的版本号

[

2023/09/13 14:21 | by 刘新修 ]

C#代码

output(normal): BK_CI_GIT_REPO_HEAD_COMMIT_AUTHOR=刘新修
output(normal): BK_CI_GIT_REPO_URL=http://172.16.101.177/health-product/health-front/health-manage-front.git
output(except): bk_repo_type_e-9937698f8027470f86c86096e78e8940=GIT
output(normal): BK_CI_GIT_REPO_NAME=health-product/health-front/health-manage-front
output(except): git.health-product.health-front.health-manage-front.new.commit=c3084bed035f479b0e4419b20c00fe4cd25f0bac

Windows相关 | 评论(0) | 引用(0) | 阅读(1820)

Mock的基本语法及使用

[

2023/09/08 15:17 | by 刘新修 ]

JavaScript代码

//定义/mock/index.js
import Mock from 'mockjs'
Mock.mock("/api/login", {
code: 200,
msg: "登陆成功",
user: {
name: "zeng8",
score: 2048,
rank: 10
},
token: "kjkjalsdiiuioayeuryqowierqiwerqowiery"
})
// url可以使用正则匹配
// 拦截get请求，返回评论数据
Mock.mock(/\/api\/feed/, "get", function(config) {
//console.log("config" , config );
//通过config可以获取到前端发给服务器的数据
var po = config.url.indexOf("?"); //获取问号的位置
if (po != -1) {
var query = config.url.slice(po + 1); //获取到查询参数current=4转换为{current: 4}
var arr = query.split("&"); //按&分割为数组
var search = {}; //定义个对象
arr.forEach(item => {
var temp = item.split("="); //把数组每个元素按等于分割[current,4]
search[temp[0]] = temp[1]; //search[ "current"] =4
})
}
// 返回一个随机数据
return Mock.mock({
"code": 0,
"data|4": [{
id: "@id",
msg: "@cparagraph(2,3)", //段落2-3行
name: "@cname", //随机中文名
date: "@datetime" //随机日期
}],
"pagnation": {
"total|10-25": 1,
"size": 4,
"pageTotal|4-10": 1,
"current": search.current,
}
})
})
Mock.mock("/api/test", Mock.mock({
name: "@cname", //随机中文名
"age|100-200": 1, //100-200的随机数
"price|10-50.2-5": 1, //10-50随机数小数点2-5位
"live|1-2": true, //随机true或false
"start|1-5": "⭐", //把字符串重复1-5次
"friend|2": ["小红", "小明", "小刚", "小白", "小蓝"], //1是挑一个大于1是重复n次
"props|1-3": {
name: "mm",
age: 22,
leg: 2,
job: "web",
eye: 2
},
"tel": /13\d{9}/,
"des": function() {
return `大家好，我的名字是${this.name}，今年${this.age}岁`
},
"data|10": [{
"id|+1": 1024,
"ID": "@id",
date: "@date",
time: "@time",
datetime: "@datetime",
name: "@cname",
pic: "@dataImage('200x100')",
description: "@cparagraph(1,3)",
title: "@ctitle(8,12)",
url: /http:\/\/www\.[a-z]{2,8}\.(com|cn|org)/,
email: /[4-8]@\.(126|qq|163)\.(com|cn|org)/,
address: "@county(true)", //省市区地址
}]
}))

H5/JS/CSS | 评论(0) | 引用(0) | 阅读(1667)

vue封装定时器

[

2023/09/07 13:29 | by 刘新修 ]

main.js 文件

JavaScript代码

/*** sleep ***/
Vue.prototype.$sleep = time => {
return new Promise((resolve, reject) => {
window.setTimeout(() => {
resolve(true)
}, time)
})
}

增加测试页面

XML/HTML代码

<!--
* @Description: npage.vue
* @Version: 1.0
* @Author: Jesse Liu
* @Date: 2022-08-01 20:32:06
* @LastEditors: Jesse Liu
* @LastEditTime: 2023-09-07 13:24:11
-->
<template>
<div class="wscn-http404-container">
<h2 style="font-weight: normal; line-height: 160%;">userInfo ========= {{ userInfo }}</h2>
<h2 style="font-weight: normal; line-height: 160%;">configInformation ========= {{ configInformation }}</h2>
<h1 style="line-height:300px; text-align:center">npage.vue (新测试文件)</h1>
<div>time:</div>
</div>
</template>
<script>
import { mapState } from "vuex";
import { parseTime } from '@/utils'
import { downloadFile } from "@/utils/getFile";
export default {
name: 'PageTest',
computed: {
...mapState("user", ["userInfo","configInformation"]),
message() {
return 'PageTest'
},
parseTime: parseTime
},
mounted() {
this.$store.dispatch("case/casesList/downloadFile",{}).then((res)=>{
// let data = res.data;
// let headers = res.headers;
// /*** 调用下载文件 ***/
// downloadFile(data, headers)
})
/*** 多定时器同时调用 ***/
this.getStateA();
this.getStateB();
/*** 业务请求接口调用示例 ***/
this.casePage();
},
methods: {
/*** 定时器演示方法 ***/
async getStateA(){
/*** 定时器只管计算时间钩子标记 ***/
console.log('sleepStateA ~~~ 开始')
/*** 多定时处理任务A ***/
console.time('sleepStateA');
let sleepStateA = await this.$sleep(5000);
console.log('sleepStateA ~~~ 结束', sleepStateA)
console.timeEnd('sleepStateA');
return sleepStateA;
},
/*** 定时器演示方法 ***/
async getStateB(){
/*** 定时器只管计算时间钩子标记 ***/
console.log('sleepStateB ~~~ 开始')
/*** 多定时处理任务B ***/
console.time('sleepStateB');
let sleepStateB = await this.$sleep(10000);
console.log('sleepStateB ~~~ 结束', sleepStateB)
console.timeEnd('sleepStateB');
return sleepStateB;
},
/*** 模拟示例业务的状态 ***/
async getCaseState(){
/*** 定时器只管计算时间钩子标记 ***/
let sleepStateCase = await this.$sleep(10000);
return sleepStateCase;
},
/*** 模拟示例业务主方法 ***/
async casePage(state = true, n = 0){
/*** 定义及获取数据状态 ***/
let runling = true;
let getCaseState = await this.getCaseState();
/*** 业务逻辑处理及使用 ***/
if(state && getCaseState) {
/*** 请求接口拿状态和后端约定状态码(根据状态码去更改runling的布尔值) ***/
// 写你的vuex调用方法，如：this.$store.dispatch('user/record', {})
/*** 以下代码是为了演示模拟3次请求后，状态变更，供参考 ***/
/*** 假设后端接口告诉你可以终止执行调用的状态 (比如后端调用3次后就更改了状态) ***/
let index = n;
index +=1;
console.log('第['+ index + ']次调用后端接口~~');
if(index >= 3) {
runling = false;
}
this.casePage(runling, index);
}
else{
console.log('===========================================\n定时器已经结束关停，累计调用共: ' + n + '次~~');
}
}
}
}
</script>
<style lang="scss" scoped>
</style>