Vue中函数防抖节流的理解及应用实现

在Vue中，函数防抖（debounce）和函数节流（throttle）是常用的一些技巧。

函数防抖（Debounce）

基本概念

在前端开发中，有些事件会频繁地触发，如窗口大小的改变、搜索框的输入等等。如果我们在这类事件的回调函数中添加一些比较耗时的操作，就会影响页面的性能和用户体验。

函数防抖的原理是，在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发了这个事件，则重新计时。

实现方法

• 手动实现

function debounce(func, wait) {
  let timeout
  return function() {
    const args = arguments
    const context = this
    clearTimeout(timeout)
    timeout = setTimeout(() => {
      func.apply(context, args)
    }, wait)
  }
}

上述实现方法，每当函数被调用时都会清除前一个setTimeout并重新计时。

• 使用Lodash库中的debounce方法

在Vue中使用Lodash库是很常见的做法，Lodash的debounce方法可以让我们更快速地实现函数防抖的效果。

import debounce from 'lodash/debounce'

export default {
  methods: {
    search: debounce(function() {
      // 搜索操作
    }, 500)
  }
}

函数节流（Throttle）

基本概念

函数节流的原理是，在一定时间内，只触发一次函数，即无论事件触发多少次，回调函数在固定时间内只会执行一次。

与函数防抖相比，函数节流在固定的时间间隔时间内必然触发一次回调函数。

实现方法

• 手动实现

function throttle(func, wait) {
  let timeout
  return function() {
    const context = this
    const args = arguments
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null
        func.apply(context, args)
      }, wait)
    }
  }
}

• 使用Lodash库中的throttle方法

import throttle from 'lodash/throttle'

export default {
  methods: {
    handleScroll: throttle(function() {
      // 滚动操作
    }, 500)
  }
}

常见应用实例

搜索框实时查询

我们在使用搜索框进行关键字搜索时，如果在每一次输入时都向后端服务器发起请求，会造成很大的压力，而使用函数防抖可以将频繁发起请求的问题得到很好地解决。

<template>
  <div>
    <input type="text" v-model="keyword" @input="search" />
    <ul>
      <li v-for="item in searchResult">{{item}}</li>
    </ul>
  </div>
</template>

<script>
import { debounce } from 'lodash'
export default {
  data() {
    return {
      keyword: '',
      searchResult: []
    }
  },
  methods: {
    search: debounce(function() {
      const _this = this
      // 发起后端请求
      axios.get('/search', {
        params: { keyword: _this.keyword }
      })
      .then(response => {
        _this.searchResult = response.data
      })
      .catch(error => {
        console.log(error)
      })
    }, 500)
  }
}
</script>

滚动条懒加载

如果页面中有大量图片需要展示时，在页面加载时一次性请求所有图片的资源会导致图片过多，页面加载速度变慢。而滚动条懒加载则可以让页面在首屏加载时只请求部分资源，当用户滚动到该部分时，再请求下个部分的图片资源，以优化页面的性能。

<template>
  <div>
    <div class="images" ref="images">
      <img v-for="item in showImages" :src="item.url" />
    </div>
  </div>
</template>

<script>
import { throttle } from 'lodash'
export default {
  data() {
    return {
      images: [],
      showImages: []
    }
  },
  mounted() {
    this.images = [
      {url: 'img1.jpg'}, {url: 'img2.jpg'}, {url: 'img3.jpg'}, 
      {url: 'img4.jpg'}, {url: 'img5.jpg'}, {url: 'img6.jpg'}, 
      {url: 'img7.jpg'}, {url: 'img8.jpg'}, {url: 'img9.jpg'}, 
      {url: 'img10.jpg'}, {url: 'img11.jpg'}, {url: 'img12.jpg'}
    ]
    window.addEventListener('scroll', this.handleScroll, { passive: true })
  },
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll: throttle(function() {
      const scrollTop = this.$refs.images.scrollTop
      const offset = this.$refs.images.clientHeight
      const height = this.$refs.images.scrollHeight
      if (scrollTop + offset >= height) {
        // 滑动到底部开始加载下一个图片列表
        const startIndex = this.showImages.length
        const endIndex = startIndex + 3
        this.showImages = this.showImages.concat(this.images.slice(startIndex, endIndex))
      }
    }, 300)
  }
}
</script>