1.防抖与节流

防抖(debounce)：
在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
典型的案例就是输入框搜索：输入结束后n秒才进行搜索请求，n秒内又输入的内容，则重新计时。

节流(throttle):
规定在一个单位时间内，只能触发一次函数，如果这个单位时间内触发多次函数，只有一次生效。
典型的案例就是鼠标不断点击触发，规定在n秒内多次点击只生效一次。

Vue 没有内置支持防抖和节流，但可以使用 Lodash 等库来实现。

import { debounce, throttle } from 'lodash-es'

export default {
  methods: {
    // 使用 Lodash 的防抖函数
    click1: debounce(function () {
      // ... 对点击的响应 ...
    }, 500),
    // 使用 Lodash 的节流函数
    click2: throttle(function () {
      // ... 对点击的响应 ...
    }, 500),
  }
}

不过这种方法对于被重用的组件来说是有问题的，因为这个预置防抖的函数是有状态的：它在运行时维护着一个内部状态。如果多个组件实例都共享这同一个预置防抖的函数，那么它们之间将会互相影响。

要保持每个组件实例的防抖函数都彼此独立，我们可以改为在 created 生命周期钩子中创建这个预置防抖的函数：

export default {
  created() {
    // 每个实例都有了自己的预置防抖的处理函数
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 最好是在组件卸载时
    // 清除掉防抖计时器
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 对点击的响应 ...
    }
  }
}

1.防抖与节流

推荐阅读更多精彩内容