溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
需求
在業務中，會碰到許多點擊請求的情況，在請求前改變一個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>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
