JS中节流和防抖函数的实现及区别示例

JS中的节流和防抖函数是常见的性能优化方案，它们可以有效减少大量事件触发时造成的性能浪费。接下来我将详细讲解它们的实现方法及区别，并提供两个示例说明。

一、防抖函数

防抖函数是指在事件触发n秒后，才会执行回调函数，如果在n秒内又触发了该事件，则重新计算时间。这个操作就像是“弹簧被压下去后在n秒后才能弹起来”。

防抖函数的实现方法如下：

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

上述防抖函数的实现方法的意思是：每当事件被触发时（比如说用户滚动事件、点击事件、输入框输入事件等等），会清除之前延时执行的回调函数的定时器，然后再设置一个新的延时计时器。如果在delay的时间内再次触发该事件，定时器会被清除，重新计算时间，不会执行回调函数，直至n秒后，定时器未被清除，执行回调函数。

以下是一个防抖函数的示例说明：

function handleClick() {
  console.log('点击了')
}
const button = document.querySelector('button')
button.addEventListener('click', debounce(handleClick, 1000))

上述代码中，给按钮添加点击事件，每次点击后一秒内不会再次触发该事件，防止用户多次点击导致不必要的重复操作。

二、节流函数

节流函数是指当事件被触发时，频率限制在一定时间内只执行一次回调函数。这个操作就像是“水龙头在一定时间内按一次只能供应一份水”。

节流函数的实现方法如下：

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

上述节流函数的实现方法的意思是：每当事件被触发时，首先获取该事件的当前时间，如果当前时间与上一次事件触发时间间隔超过了指定的时长delay，则执行回调函数，否则忽略该次事件的触发。

以下是一个节流函数的示例说明：

function handleScroll() {
  console.log('滚动了')
}
window.addEventListener('scroll', throttle(handleScroll, 1000))

上述代码中，给window对象添加了滚动事件，在一秒内最多只会触发一次该事件的回调函数，减少了因用户的快速滑动导致的重复操作，使页面更加流畅。

三、区别与应用场景

防抖与节流的区别在于：

• 防抖函数是在一定时间内多次触发事件，只执行最后一次事件的回调函数，可以防止频繁的触发无意义的操作；
• 而节流函数则是在一定时间内限制事件触发次数，使回调函数能够以固定且合适的频率执行，适用于一些需要稳定执行而忽略间隔时间的场景。

因此，应用场景不同，任选其一取决于实际需求。例如，用户搜索时，防抖能够减少请求次数，提高搜索效率，而鼠标移动时的实时监测事件触发则需要使用节流，限制事件触发频率，减少浏览器性能消耗，保持页面流畅。