vue 中使用防抖函数组件

admin管理员组

文章数量:1794759

vue 中使用防抖函数组件

初级

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) } } }

2、然后在要使用的组件里 import 进来

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

3、在组件方法中使用

template:

<div @click="toDoSth(vm)"></div> 高级

虽然上面的写法已经能解决问题了，但是总觉得不够美观。 在网上搜索一番，看到有个哥们将防抖封装成一个组件，果然和我想的一样。不过这哥们直接将上下文当参数传进来了，比我把整个实例传进来高明，我在这个基础上添加了 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 } Vueponent('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 文件

import 'xxx/debounce.js' export default { methods: { toDoSth(e) { // 这里正常写就可以了 } } }

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

<Debounce :time="500" event="click" :immediate="true"> <button @click="toDoSth($event, 1)">click me</button> </Debounce>

到此就完成了一次 Debounce 组件的封装。

参考：

最后附上这位哥们的原帖： juejin.im/post/5c2dc7a9e51d4573c8491e77

本文标签： 函数防抖组件Vue