Vue2中的防抖和节流

Vue2 中的防抖和节流可以通过使用 Lodash 库中的 debounce 和 throttle 方法来实现。

防抖（debounce）是指在一定时间内，如果事件持续触发，则只执行最后一次事件。常用于输入框搜索、滚动加载等场景。

import { debounce } from 'lodash'

export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    // 防抖函数
    handleInput: debounce(function() {
      console.log(this.inputValue)
      // 执行搜索操作
    }, 500)
  }
}

上面的代码中，handleInput 方法使用了 debounce 方法，设置了一个 500ms 的时间间隔，如果在这个时间间隔内再次触发 handleInput 方法，则会重新计时，直到时间间隔内没有再次触发，才会执行一次方法。

节流（throttle）是指在一定时间内，无论事件触发多少次，只执行一次事件。常用于滚动事件、窗口大小改变等场景。

import { throttle } from 'lodash'

export default {
  data() {
    return {
      scrollHeight: 0
    }
  },
  mounted() {
    // 监听滚动事件
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    // 移除滚动事件监听
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    // 节流函数
    handleScroll: throttle(function() {
      this.scrollHeight = window.scrollY
      console.log(this.scrollHeight)
      // 执行滚动操作
    }, 500)
  }
}

上面的代码中，handleScroll 方法使用了 throttle 方法，设置了一个 500ms 的时间间隔，如果在这个时间间隔内再次触发 handleScroll 方法，则不会执行方法，直到时间间隔结束后再次触发才会执行一次方法。

防抖的实现原理

防抖的实现原理是通过设置一个定时器，在指定的时间内如果再次触发事件，则清除之前的定时器，重新设置一个新的定时器。如果在指定的时间内没有再次触发事件，则执行事件处理函数。

下面是一个简单的防抖函数的实现：

function debounce(fn, delay) {
  let timer = null
  return function() {
    const context = this
    const args = arguments
    clearTimeout(timer)
    timer = setTimeout(function() {
      fn.apply(context, args)
    }, delay)
  }
}

这个函数接收两个参数，第一个参数是要执行的函数，第二个参数是时间间隔。在函数内部，使用 setTimeout 设置一个定时器，如果在指定的时间内再次触发事件，则清除之前的定时器，重新设置一个新的定时器。如果在指定的时间内没有再次触发事件，则执行事件处理函数。

节流的实现原理

节流的实现原理是通过设置一个时间戳，在指定的时间内如果再次触发事件，则不执行事件处理函数。如果时间戳到达指定时间，则执行事件处理函数，并更新时间戳。

下面是一个简单的节流函数的实现：

function throttle(fn, delay) {
  let lastTime = 0
  return function() {
    const context = this
    const args = arguments
    const nowTime = Date.now()
    if (nowTime - lastTime > delay) {
      fn.apply(context, args)
      lastTime = nowTime
    }
  }
}

这个函数接收两个参数，第一个参数是要执行的函数，第二个参数是时间间隔。在函数内部，使用 Date.now() 获取当前时间戳，如果当前时间戳与上一次执行的时间戳之差大于指定的时间间隔，则执行事件处理函数，并更新时间戳。如果时间戳之差小于指定的时间间隔，则不执行事件处理函数。

参数说明

防抖和节流的参数说明如下：

防抖

• fn：要执行的函数。
• delay：时间间隔，单位为毫秒。

节流

• fn：要执行的函数。
• delay：时间间隔，单位为毫秒。

需要注意的是，防抖和节流的时间间隔需要根据具体的业务场景来设置，时间间隔过短会导致频繁触发事件，时间间隔过长会导致用户体验不佳。