初級

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}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 文件

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 組件的封裝。

補充知識：vue防抖函數，避免暴力點擊

1.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

2.在main.js 引入

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

/* 引入避免暴力雙擊點擊*/

Vue.use(clickAgain);

3.使用

<a-button key='submit' type='primary' :loading='false' v-clickAgain='handleOk'> 保存</a-button>

以上這篇在vue中使用防抖函數組件操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。