vue点击事件防抖

在Vue中，可以使用lodash的debounce函数或者自定义一个节流函数来实现点击事件的防抖。

一、使用lodash的debounce

1、首先需要安装lodash

npm install lodash --save

2、在使用的页面需要引入

import debounce from 'lodash/debounce'; 

3、在methods中定义你的方法，并且用debounce进行包裹： 

methods: {
  clickMethod: debounce(function() {
    // 你的点击后执行逻辑
    console.log('Clicked!');
  }, 500) // 防抖的时间设置为500毫秒或其他时长
} 

应用 

<template>
  <div>
    <button @click="debouncedClick">点击</button>
  </div>
</template>

<script>
import { debounce } from "lodash-es";

export default {
  created() {
    // 每个实例都有了自己的预置防抖的处理函数
    this.debouncedClick = debounce(this.click, 500);
  },
  unmounted() {
    // 在组件卸载时最好清除防抖计时器
    this.debouncedClick.cancel();
  },
  methods: {
    click() {
      console.log("处理点击事件");
    }
  }
};
</script>

 

 二、自定义防抖

1、在methods中定义方法，并在点击事件中调用自定义防抖方法

methods: {
  debounce(func, wait, immediate) {
    let timeout;
    return function() {
      let context = this, args = arguments;
      let later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
      };
      let callNow = immediate && !timeout;
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
      if (callNow) func.apply(context, args);
    };
  },
  clickMethod: this.debounce(function() {
    // 你的点击事件逻辑
    console.log('Clicked!');
  }, 500, true) // 防抖的时间设置为500毫秒, true表示立即执行
}

2、html处

<button @click="clickMethod">Click me</button>