初级初级1、先写好防抖函数
/**
* @desc 防抖函数
* @param {需要防抖的函数} func
* @param {延迟时间} wait
* @param {是否立即执行} immediate
*/
export function debounce(func, wait, immediate) {
let timeout

return function(...args) {
let context = this
if (timeout) clearTimeout(timeout)

if (immediate) {
let callNow = !timeout
timeout = setTimeout(function() {
timeout = null
}, wait)
if (callNow) func.apply(context, args)
} else {
timeout = setTimeout(function() {
func.apply(context, args)
}, wait)
}
}
}

/**
* @desc 防抖函数
* @param {需要防抖的函数} func
* @param {延迟时间} wait
* @param {是否立即执行} immediate
*/
export function debounce(func, wait, immediate) {
let timeout

return function(...args) {
let context = this
if (timeout) clearTimeout(timeout)

if (immediate) {
let callNow = !timeout
timeout = setTimeout(function() {
timeout = null
}, wait)
if (callNow) func.apply(context, args)
} else {
timeout = setTimeout(function() {
func.apply(context, args)
}, wait)
}
}
}
2、然后在要使用的组件里 import 进来
import { debounce } from 'xxx'

export default {
data: {
return {
vm: this
}
},
methods: {
toDoSth: debounce((vm) => {
// 这里将当前组件实例当参数传入
// 就可以使用实例中定义的一些属性、方法
// 补充一下，这里如果换成非箭头函数的写法，也可以直接访问实例。
},
500,
true
)
}
}

import { debounce } from 'xxx'

export default {
data: {
return {
vm: this
}
},
methods: {
toDoSth: debounce((vm) => {
// 这里将当前组件实例当参数传入
// 就可以使用实例中定义的一些属性、方法
// 补充一下，这里如果换成非箭头函数的写法，也可以直接访问实例。
},
500,
true
)
}
}
3、在组件方法中使用template:

高级高级虽然上面的写法已经能解决问题了，但是总觉得不够美观。在网上搜索一番，看到有个哥们将防抖封装成一个组件，果然和我想的一样。不过这哥们直接将上下文当参数传进来了，比我把整个实例传进来高明，我在这个基础上添加了 immediate 的功能，还有添加了默认不传 event 参数的情况处理。debounce.js 文件：
import Vue from 'vue'

const debounce = (func, time, ctx, immediate) => {
let timer
const rtn = (...params) => {
clearTimeout(timer)

if (immediate) {
let callNow = !timer
timer = setTimeout(() => {
timer = null
}, time)
if (callNow) func.apply(ctx, params)
} else {
timer = setTimeout(() => {
func.apply(ctx, params)
}, time)
}
}
return rtn
}

Vue.component('Debounce', {
abstract: true,
props: ['time', 'events', 'immediate'],
created() {
this.eventKeys = this.events && this.events.split(',')
},
render() {
const vnode = this.$slots.default[0]

// 如果默认没有传 events，则对所有绑定事件加上防抖
if (!this.eventKeys) {
this.eventKeys = Object.keys(vnode.data.on)
}

this.eventKeys.forEach(key => {
vnode.data.on[key] = debounce(
vnode.data.on[key],
this.time,
vnode,
this.immediate
)
})

return vnode
}
})

import Vue from 'vue'

const debounce = (func, time, ctx, immediate) => {
let timer
const rtn = (...params) => {
clearTimeout(timer)

if (immediate) {
let callNow = !timer
timer = setTimeout(() => {
timer = null
}, time)
if (callNow) func.apply(ctx, params)
} else {
timer = setTimeout(() => {
func.apply(ctx, params)
}, time)
}
}
return rtn
}

Vue.component('Debounce', {
abstract: true,
props: ['time', 'events', 'immediate'],
created() {
this.eventKeys = this.events && this.events.split(',')
},
render() {
const vnode = this.$slots.default[0]

// 如果默认没有传 events，则对所有绑定事件加上防抖
if (!this.eventKeys) {
this.eventKeys = Object.keys(vnode.data.on)
}

this.eventKeys.forEach(key => {
vnode.data.on[key] = debounce(
vnode.data.on[key],
this.time,
vnode,
this.immediate
)
})

return vnode
}
})
使用方式：使用方式：1、引入 debounce.js 文件1、引入 debounce.js 文件
import 'xxx/debounce.js'

export default {
methods: {
toDoSth(e) {
// 这里正常写就可以了
}
}
}


import 'xxx/debounce.js'

export default {
methods: {
toDoSth(e) {
// 这里正常写就可以了
}
}
}

2、在模版里使用。2、在模版里使用其中time为必选参数。 event 和 immediate 参数都是可选参数。如果组件下有多个事件绑定，那么 event 可以自定义需要进行防抖处理的事件。如果需要立即执行的话，可以将 immediate 参数设置为 true。





到此就完成了一次 Debounce 组件的封装。补充知识：vue防抖函数，避免暴力点击补充知识：补充知识：vue防抖函数，避免暴力点击1.vue项目/src/components/directive/clickAgain.js1.vue项目/src/components/directive/clickAgain.js
import Vue from 'vue'

const clickAgain = Vue.directive('clickAgain',{
// 指令的定义
bind(el, binding, vnode, oldVnode) {

// 绑定this

let self = vnode.context;

el.onclick = function (e) {

if (self._is_click) {

return false;

}

/*执行指令绑定的事件*/

self[binding.expression]()

self._is_click=true;

setTimeout(()=>{

self._is_click=false;

},2000)


};
}
});
export default clickAgain

import Vue from 'vue'

const clickAgain = Vue.directive('clickAgain',{
// 指令的定义
bind(el, binding, vnode, oldVnode) {

// 绑定this

let self = vnode.context;

el.onclick = function (e) {

if (self._is_click) {

return false;

}

/*执行指令绑定的事件*/

self[binding.expression]()

self._is_click=true;

setTimeout(()=>{

self._is_click=false;

},2000)


};
}
});
export default clickAgain
2.在main.js 引入2.在main.js 引入
import clickAgain from './components/directive/clickAgain.js'
import clickAgain from './components/directive/clickAgain.js'
/* 引入避免暴力双击点击*/
Vue.use(clickAgain);
/* 引入避免暴力双击点击*/Vue.use(clickAgain);3.使用3.使用

保存


保存
以上这篇在vue中使用防抖函数组件操作就是小编分享给大家的全部内容了，希望能给大家一个参考。