vue中使用iview ui(Button)组件按钮实现节流, 防抖功能

1: 了解节流跟防抖的作用:

防抖（Debouncing）和节流（Throttling）都是用于限制某个函数执行频率的技术，通常用于处理频繁触发的事件，例如浏览器窗口的大小变化、滚动事件、输入框输入事件等。

防抖（Debouncing）：
防抖的基本思想是，当事件触发后，不立即执行对应的处理函数，而是等待一段时间（防抖时间间隔），如果在这段时间内没有再次触发该事件，那么才执行对应的处理函数。

在实际应用中，防抖常用于处理输入框输入事件，以减少输入时频繁的请求或计算操作。例如，在用户输入搜索关键词时，防抖可以确保只有在用户停止输入一段时间后才触发搜索操作，从而减轻服务器压力。

节流（Throttling）：
节流的基本思想是，当事件触发后，如果在一定的时间间隔内再次触发，那么将被忽略，只有在时间间隔过去后才执行下一次。与防抖不同的是，节流会以固定的时间间隔执行一次处理函数，而不管事件触发的频率。

节流常用于处理事件的持续触发，例如页面滚动事件。通过节流，你可以控制在一定时间内只执行一次滚动处理，避免过于频繁的触发，提高性能。

区别：
触发时机：

防抖：只有在事件停止触发一段时间后才执行。
节流：以固定的时间间隔执行一次，不管事件触发频率多高。
执行次数：

防抖：只执行一次，通常是在最后一次触发事件后。
节流：以固定间隔执行，可能会执行多次，但频率受控。
适用场景：

防抖：适用于处理频繁触发但只关心最后一次的情况，例如输入框输入事件、搜索操作。
节流：适用于处理持续触发但希望控制执行频率的情况，例如滚动事件、resize事件。

2: 创建一个外部js文件 throttleDirective.js(此文件演示包含了防抖/节流, 实际开发注意命名)

export default {
  // 用于给按钮添加节流功能
  install (Vue) {
    Vue.directive('throttle', {
      bind (el, binding, vnode) {
        let timeout
        el.addEventListener('click', () => {
          if (!timeout) {
            timeout = setTimeout(() => {
              timeout = null
            }, parseInt(binding.arg) || 300) // 默认节流时间为300毫秒
            binding.value()
          }
        })
      }
    })
  }
}
export default {
  // 用于给按钮添加防抖功能
  install (Vue) {
    Vue.directive('debounce', {
      bind (el, binding, vnode) {
        let timeout
        const delay = 2000 // 默认时间

        el.addEventListener('click', () => {
          clearTimeout(timeout)

          timeout = setTimeout(() => {
            binding.value()
          }, delay)
        })
      }
    })
  }
}

3: 在main.js文件里面引用这个文件

import ThrottleDirective from './utils/throttleDirective'
Vue.use(ThrottleDirective)

4: 组件里面使用

无传参写法
<Button class="form-ivu-btn" type="primary" v-throttle:500="onSave">保存</Button>
有传参写法
<Button class="form-ivu-btn" type="primary" v-throttle:500="() => onSave('参数')">保存</Button>
这里要使用箭头函数, 因为在Vue中，如果使用 v-throttle:500="onSave()"，它会立即调用 onSave 函数并将返回值传递给 v-throttle 指令，这样就不再是一个函数了。而 v-throttle 期望的是一个函数，因此会导致报错。