vue2实现防抖和节流

在Vue2中实现防抖和节流可以使用Vue的指令和方法来实现。

## 防抖

防抖的实现方法是在一定时间内只执行一次方法，如果在这段时间内又有触发事件的操作，那么计时器就会被重新计时，直到时间结束才会执行方法。

### 指令实现

在Vue2中可以使用v-debounce指令来实现防抖：

<template>
  <button v-debounce:click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked');
    }
  }
}
</script>

可以看到v-debounce指令绑定在click事件上，这样就会在点击按钮时执行handleClick方法，但是在执行handleClick方法之前会先执行防抖函数。

下面是v-debounce指令的实现：

Vue.directive('debounce', {
  inserted: function (el, binding) {
    let timer;
    el.addEventListener('click', () => {
      if (timer) clearTimeout(timer);
      timer = setTimeout(() => {
        binding.value();
      }, 500)
    })
  }
})

上面的代码实现了一个叫做debounce的指令，它会在元素插入到DOM中时绑定一个click事件，在click事件中执行防抖函数，最后执行传入的回调函数。

### 方法实现

除了指令，我们也可以在Vue2的方法中实现防抖。

<template>
  <button @click="debounceClick">Click me</button>
</template>

<script>
export default {
  methods: {
    debounce(fn, delay) {
      let timer;
      return function () {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          fn.apply(this, arguments);
        }, delay)
      }
    },
    handleClick() {
      console.log('Clicked');
    },
    debounceClick: debounce(this.handleClick, 500)
  }
}
</script>

上面的代码中我们在Vue2的methods中实现了一个debounce方法，它返回一个函数，这个函数会在delay时间内执行一次fn方法。我们在handleClick方法前面加上了debounce，这样每次点击按钮时就会执行debounceClick方法，而不是直接执行handleClick方法。

## 节流

节流的实现方法是在一段时间内只执行一次方法，如果在这段时间内有多次触发事件的操作，那么只有第一次触发事件的操作会执行方法，其余的操作会被忽略，直到时间结束才会重新计时。

### 指令实现

在Vue2中可以使用v-throttle指令来实现节流：

<template>
  <button v-throttle:click="handleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    handleClick() {
      console.log('Clicked');
    }
  }
}
</script>

可以看到v-throttle指令绑定在click事件上，这样就会在点击按钮时执行handleClick方法，但是在执行handleClick方法之前会先执行节流函数。

下面是v-throttle指令的实现：

Vue.directive('throttle', {
  inserted: function (el, binding) {
    let timer;
    el.addEventListener('click', () => {
      if (!timer) {
        timer = setTimeout(() => {
          timer = null;
          binding.value();
        }, 500)
      }
    })
  }
})

上面的代码实现了一个叫做throttle的指令，它会在元素插入到DOM中时绑定一个click事件，在click事件中执行节流函数，最后执行传入的回调函数。

### 方法实现

除了指令，我们也可以在Vue2的方法中实现节流。

<template>
  <button @click="throttleClick">Click me</button>
</template>

<script>
export default {
  methods: {
    throttle(fn, delay) {
      let timer;
      return function () {
        if (!timer) {
          timer = setTimeout(() => {
            timer = null;
            fn.apply(this, arguments);
          }, delay)
        }
      }
    },
    handleClick() {
      console.log('Clicked');
    },
    throttleClick: throttle(this.handleClick, 500)
  }
}
</script>

上面的代码中我们在Vue2的methods中实现了一个throttle方法，它返回一个函数，这个函数会在delay时间内执行一次fn方法。我们在handleClick方法前面加上了throttle，这样每次点击按钮时就会执行throttleClick方法，而不是直接执行handleClick方法。