首页 > 编程语言 > 在vue中使用防抖函数组件操作
2020
10-08

在vue中使用防抖函数组件操作

初级

1、先写好防抖函数

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/**
 * @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 进来

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 文件：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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
2
3
4
5
6
7
8
9
import 'xxx/debounce.js'
 
export default {
 methods: {
 toDoSth(e) {
 // 这里正常写就可以了
 }
 }
}

2、在模版里使用。

其中time为必选参数。 event 和 immediate 参数都是可选参数。

如果组件下有多个事件绑定，那么 event 可以自定义需要进行防抖处理的事件。

如果需要立即执行的话，可以将 immediate 参数设置为 true。

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

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

补充知识：vue防抖函数，避免暴力点击

1.vue项目/src/components/directive/clickAgain.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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 引入

import clickAgain from './components/directive/clickAgain.js'

/* 引入避免暴力双击点击*/

Vue.use(clickAgain);

3.使用

?
1
2
3
<a-button key="submit" type="primary" :loading="false" v-clickAgain="handleOk">
 保存
</a-button>

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

编程技巧