关于JavaScript防抖与节流的区别与实现

2023年6月11日下午1:48 • JavaScript

下面是关于JavaScript防抖与节流的区别与实现的完整攻略。

1. 防抖与节流的定义

防抖和节流都是针对一些高频率触发的事件而出现的优化方案。它们的基本思路都是减少一些重复触发导致的性能问题。

防抖：当一个用户连续地触发某个事件时，防抖会在一定时间内只执行一次该事件，如果在这个时间段内该事件再次被触发，则重置时间。可以理解为：事件被触发后，等待一段时间，如果这段时间内没有再次触发该事件，则执行该事件。防抖的应用场景：搜索联想，用户在输入时只有停止输入一段时间后才需要触发联想。
节流：当一个用户连续地触发某个事件时，节流会定期执行该事件，即使在这段时间内该事件再次被触发，也只会在这个定期时间到达后再次执行，不会重复执行。可以理解为：事件被触发后，每隔一定时间段后执行一次该事件。节流的应用场景：滚动条事件，每隔一段时间执行一次页面滚动时的位置计算。

2. 防抖与节流的实现

2.1 防抖的实现

下面是一个基本的防抖实现代码：

function debounce(fn, delay) {
  let timer
  return function() {
    clearTimeout(timer)
    // 确定执行时机
    timer = setTimeout(() => {
      fn.apply(this, arguments)
    }, delay)
  }
}

这段代码中的fn为需要执行的函数，delay为等待的时间。这里应用了闭包来保存一个定时器的变量timer，用来控制执行时机。

下面是一个搜索联想的实现示例：

const searchInput = document.querySelector('.search-input')
const searchResult = document.querySelector('.search-result')

searchInput.addEventListener('input', debounce(function(e) {
  const keyword = e.target.value
  // 当输入框的值为空时，隐藏搜索结果
  if (!keyword) {
    searchResult.style.display = 'none'
    return
  }
  // ajax请求相关数据并渲染搜索结果
  // ......
}, 300))

在上面的示例中，搜索输入框的中间态每输入一个字符，就会触发input事件，但当用户连续输入时，需要等待一段时间后，才开始执行渲染搜索结果。

2.2 节流的实现

下面是一个基本的节流实现代码：

function throttle(fn, delay) {
  let flag = true
  return function() {
    // 如果已经执行过该函数，则退出
    if (!flag) {
      return
    }
    // 确定执行时机
    flag = false
    setTimeout(() => {
      fn.apply(this, arguments)
      flag = true
    }, delay)
  }
}

这段代码中的fn为需要执行的函数，delay为等待的时间。这里应用了闭包来保存一个标志位flag，用来判断是否需要执行。

下面是一个网页滚动加载的实现示例：

const scrollWrapper = document.querySelector('.scroll-wrapper')
const listWrapper = document.querySelector('.list-wrapper')

scrollWrapper.addEventListener('scroll', throttle(function(e) {
  // 当滚动到底部时加载更多数据，避免多次触发
  if (scrollWrapper.scrollTop + scrollWrapper.clientHeight >= listWrapper.clientHeight) {
    // ajax请求加载更多数据
    // ......
  }
}, 1000))

在上面的示例中，当用户滚动到底部时，需要等待一段时间后再执行加载更多数据的操作，避免多次触发造成的性能问题。