JavaScript函数节流和函数防抖之间的区别

JavaScript函数节流和函数防抖是前端开发中常用的优化技巧，本文将对这两种技巧进行详细讲解，并且给出具体的示例说明。

什么是函数节流？

函数节流是指在一定时间内，无论事件被触发了多少次，都只会执行一次函数。常见的应用场景包括：

• 滚动加载页面时，用户快速滑动页面，避免频繁触发事件，降低页面性能。
• 窗口大小改变时，频繁触发事件，限制事件触发次数，保证事件响应的流畅性。

函数节流的实现通常采用定时器的方式，用一个变量记录上次执行的时间戳，然后在每次执行时判断当前时间是否超过规定时间间隔。

下面是一个函数节流的例子，实现当用户快速滚动页面时，图片懒加载仍能同时运行，但不会过度消耗浏览器性能：

function throttle(func, delay) {
  let prev = Date.now();
  return function() {
    const context = this;
    const args = arguments;
    const now = Date.now();
    if (now - prev >= delay) {
      func.apply(context, args);
      prev = Date.now();
    }
  }
}

function lazyLoadImg() {
  // code
}

window.addEventListener('scroll', throttle(lazyLoadImg, 300));

什么是函数防抖？

函数防抖的作用是在一定时间内，对于连续触发的事件，只执行一次函数。使用场景包括：

• 搜索框实时搜索时，用户连续输入字符，减少请求次数，避免服务器负荷过大。
• 窗口大小改变时，连续触发resize事件，但只有在停止改变大小时才执行事件响应。

函数防抖的实现也可以采用定时器的方式，用一个变量记录上次执行的时间戳。在规定时间间隔内，如果再次触发事件，就将上次的定时器清空，重新设置定时器。

下面是一个函数防抖的例子，实现当用户连续输入时，延迟一定时间再执行搜索：

function debounce(func, delay) {
  let timerId;
  return function() {
    const context = this;
    const args = arguments;
    if (timerId) clearTimeout(timerId);
    timerId = setTimeout(() => {
      func.apply(context, args);
    }, delay)
  }
}

function search() {
  // code
}

const searchBar = document.querySelector('#search-bar');
searchBar.addEventListener('input', debounce(search, 300));

总结

函数节流和函数防抖都是优化前端性能的有用技巧。函数节流用于限制事件触发次数，适合滚动，拖拽等场景；函数防抖用于连续多次触发事件时，减少不必要的处理，适合输入框搜索等场景。了解这两种优化技巧，可以更好地掌握前端性能优化的策略。