vue2与vue3防抖处理

vue2的防抖处理(自定义指令)

在utils/index.js 文件中

// 防抖 立即执行
function debounce(fn, arg) {
  // delay = delay || 1000;
  let delay = 1000;
  let timeout;
  return function() {
    let context = this;
    if (timeout) clearTimeout(timeout);

    let callNow = !timeout;
    timeout = setTimeout(() => {
      timeout = null;
    }, delay);
    if (callNow) fn.apply(context, arg);
  };
}

export { debounce };

src/directive/index.js 自定义指令：

import Vue from 'vue';

  import { debounce } from '@/utils';

Vue.directive('debounce', {
  bind(el, binding) {
    const [fn, ...args] = binding.value;
    el.addEventListener('click', debounce(fn, args));
  },
  unbind(el, binding) {
    const [fn, ...args] = binding.value;
    el.removeEventListener('click', debounce(fn, args));
  }
});

使用：

<el-button v-debounce="[handleDownload]">下载模版</el-button>

 

   // 要执行的函数

    handleDownload() {

     console.log（）

    },

 vue3的防抖处理（自定义ref）

<template>
  <input v-model="message" />
  <h2>{{ message }}</h2>
</template>

import {debouncedRef} from '../hooks/debounce.js'

export default {
    setup() {
         const message = debouncedRef('哈哈')
         return {
             message
         };
    }
}

debounce.js

import {
  costomRef
} from 'vue'
export function debouncedRef(value, delay = 200) {
  let timeout;
  return costomRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue;
          trigger()
        }, delay)
      }
    }
  })
}