vue以组件或者插件的形式实现throttle或者debounce
作者:虚光 时间:2024-05-09 15:23:55
需求
在业务中,会碰到许多点击请求的情况,在请求前改变一个lock变量(在lock变回来之前,点击无效),在请求回调中再改变lock.以确保在,请求回来之前,不会重复请求。或者类似的点击节流业务
实现方式
指令
<div v-for="a in 3" :key="a" v-demo:getData="a">指令</div>
//getData是函数名,a是传入的参数
directives: {
demo: {
bind(el: Element, binding: any, vnode: VNode) {
const that: any = vnode.context
// console.log(binding, vnode)
// console.log(binding.arg, binding.value)
if (!that[binding.arg].isBind){ // 打上标记,如果已经转换了,就不转了
that[binding.arg] = deb(that[binding.arg])
that[binding.arg].isBind = true
}
el.addEventListener('click', function T(event: Event): void{
that[binding.arg](binding.value)
})
},
},
},
组件
子组件
<template>
<div>
<div @click="senClick">
<slot></slot>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';
@Component({})
export default class Child extends Vue {
@Prop({ type: Number, default: 500 }) public timeOut!: number; // 时间
@Prop({ type: String, default: 'throttle' }) public type!: string; // 类型
@Prop() public params!: any; // 传入参数
public message: string = 'Hello';
public throttleLock: boolean = false;
public debounceLock: number = 0;
public time: any;
public senClick(): void {
console.log(this.timeOut, this.type, this.params);
if (this.type === 'throttle') {
if (this.throttleLock) {
return;
}
this.throttleLock = true;
setTimeout(() => {
this.throttleLock = false;
}, this.timeOut);
this.$emit('myClick', this.params);
} else if (this.type === 'debounce') {
if (this.debounceLock) {
clearTimeout(this.debounceLock);
}
this.debounceLock = setTimeout(() => {
this.$emit('myClick', this.params);
}, this.timeOut);
} else {
this.$emit('myClick', this.params);
}
}
}
</script>
<style scoped lang='stylus'>
div {
width: 100%;
height: 100%;
}
</style>
父组件
<template>
<div class="home">
<throttle-and-debounce @myClick="getData" :time="500" type="throttle" params="123">
<div>我是组件内容</div>
</throttle-and-debounce>
</div>
</template>
import { Component, Vue } from 'vue-property-decorator';
import throttleAndDebounce from '@/components/throttleAndDebounce.vue';
@Component({
components: {
throttleAndDebounce,
},
})
export default class home extends Vue {
public getData(e: any){
console.log('异步数据', e)
}
}
</script>
plugin
函数
function deb(fn: function){
let lock: number
return (e) => {
if (lock){
clearTimeout(lock)
}
console.log('创建闭包延迟执行')
lock = setTimeout(() => {
fn(e)
}, 1500)
}
}
export {deb}
组件内使用
<template>
<div class="home">
<div @click="func(123)">function</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import {deb} from '@/assets'
@Component({
components: {
throttleAndDebounce,
},
})
export default class home extends Vue {
public beforeCreate(){
this.func = deb((e: {a: number}) => {
console.log('this', e)
})
}
}
</script>
来源:https://juejin.im/post/5c18a7b7f265da61553ac179
标签:vue,throttle,debounce
0
投稿
猜你喜欢
JavaScript 字符串连接性能优化
2024-05-11 09:35:53
关于 SQL Server ErrorLog 错误日志说明
2024-01-19 23:57:03
Python Django切换MySQL数据库实例详解
2024-01-21 02:02:47
Python subprocess模块详细解读
2023-11-17 02:50:01
使用tensorflow实现线性回归
2023-08-14 02:33:55
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2023-11-14 19:42:56
python在windows和linux下获得本机本地ip地址方法小结
2023-12-18 16:52:03
如何用python绘制雷达图
2023-04-19 12:44:09
asp如何遍历Cookies集合?
2009-11-08 19:07:00
sql server创建复合主键的2种方法
2024-01-26 11:10:38
解决django 向mysql中写入中文字符出错的问题
2024-01-23 20:39:00
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2021-02-08 22:41:59
python读取html中指定元素生成excle文件示例
2021-04-08 19:51:11
通过sysbench工具实现MySQL数据库的性能测试的方法
2024-01-27 04:13:23
Mysql索引性能优化问题解决方案
2024-01-27 12:14:41
python读取excel指定列数据并写入到新的excel方法
2022-04-06 20:15:46
正则表达式学习笔记
2008-04-15 07:44:00
Python/JS实现常见加密算法的示例代码
2023-01-25 08:17:29
python列表排序用 sort()和sorted()的区别
2021-11-27 10:36:20
如何利用JSHint减少JavaScript的错误
2024-05-28 15:37:40