JavaScript函数防抖与函数节流的定义及使用详解

函数防抖和函数节流是 JavaScript 常用的两种优化方案。它们可以延迟函数的执行，减少频繁请求和高频事件造成的性能问题。

一、函数防抖

在 JavaScript 中，如果频繁触发某个事件，比如输入框输入，鼠标滚动等，可能会造成函数频繁执行，影响性能。而使用函数防抖可以延迟函数的执行，只有等到一段时间内没有触发事件后才会执行函数。函数防抖的概念可以理解为:多次触发事件后，事件处理函数只执行一次，并且是在触发操作后一段时间（例如2秒）才执行，如果在这个时间内再次触发事件，则重新计算时间。

1. 函数防抖的基本实现

function debounce(fn, delay) {
  let timer = null;
  return function() {
    let args = arguments;
    let that = this;
    timer && clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(that, args);
    }, delay || 500);
  }
}

函数接受两个参数：要执行的函数和延迟时间。返回一个新的函数，这个函数利用了闭包的特性，保存了timer对象，保证了每次调用函数时都是同一个timer。接着调用 setTimeout 设置延时执行函数，如果在延时期间又执行了一次函数，则清空之前的计时器，重新开始计时。

2. 函数防抖的应用

例如，我们要监听一个输入框的变化，根据用户输入的内容进行搜索：

<input type="text" id="searchInput">

const searchInput = document.querySelector('#searchInput');

function search() {
  console.log(searchInput.value);
  // 进行搜索操作
}

searchInput.addEventListener('input', debounce(search, 500));

上面的代码中，我们给输入框添加了 input 事件监听器，并且使用 debounce 函数将 search 函数进行了防抖处理，延迟 500ms 执行搜索操作。

二、函数节流

函数防抖在某个时间段内只会执行一次函数，而函数节流会让函数按照一定的时间间隔执行。函数节流的概念可以理解为：高频触发事件，但在n秒内，只会执行一次函数。

1. 函数节流的基本实现

function throttle(fn, delay) {
  let timer = null;
  let lastTime = 0;
  return function() {
    let args = arguments;
    let that = this;
    let nowTime = new Date().getTime();
    if(nowTime - lastTime > delay || !lastTime) {
      timer && clearTimeout(timer);
      lastTime = nowTime;
      timer = setTimeout(function(){
        fn.apply(that, args);
      }, delay || 500);
    }
  }
}

函数节流的实现也是利用闭包保存了 timer 和 lastTime，在函数内部进行计算判断是否达到了时间间隔，在间隔达到时执行目标函数，否则不做任何操作。

2. 函数节流的应用

同样以监听输入框为例：

searchInput.addEventListener('input', throttle(search, 500));

使用 throttle 函数对 search 函数进行节流，每 500ms 执行搜索操作。

总结

函数防抖和函数节流可以有效地减少高频事件的触发次数，优化性能，提高用户体验。在实际开发中，我们需要根据场景进行选择合适的使用方法。