vue3防抖函数封装与使用，以指令的形式使用

if时光重来2024-01-08 2:06

utils/debounce.js

javascript 复制代码

/**
 * 防抖函数
 * @param {*} fn 函数
 * @param {*} delay 暂停时间
 * @returns 
 */
export function debounce(fn, delay = 500) {
  
    let timer = null
    return function (...args) {
      // console.log(arguments);
      // const args = Array.from(arguments)
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        fn.apply(this, args)
      }, delay)
    }
  }

main.js 定义全局化指令

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'
import { debounce } from './utils/debounce'

const app = createApp(App)

// 创建全局指令
app.directive('debounce', {
  mounted(el, binding) {
    const { value, arg } = binding
    const debouncedFn = debounce(value, arg)
    el.addEventListener('click', debouncedFn) // 将事件改为click
  },
  beforeUnmount(el, binding) {
    const { value } = binding
    el.removeEventListener('click', value)
  }
})

app.mount('#app')

指令的使用

复制代码

<template>
	<button v-debounce="handleInput" :delay="500">无参</button>
	<button v-debounce="() => handleInput2(1, 2)" :delay="500">传参</button>
</template>
<script>
	export default{
		methods: {
		    handleInput(){
		      console.log('防抖指令的使用');
		    },
		   handleInput2(v1, v2){
		      console.log('接收参数', v1,v2);
		    },
		}
	}
</script>