JavaScript 防抖和节流遇见的奇怪问题及解决

什么是防抖和节流

防抖和节流都是用来限制某个函数的执行频率，防止函数被频繁执行，造成CPU资源浪费等问题。

防抖和节流也是前端开发中比较常用的技术。防抖通常用在用户输入的场景中，如搜索框输入联想；节流主要用在鼠标滚动等频繁触发的场景中，如图片懒加载。

防抖和节流的实现方式各有不同。防抖的原理是对事件的触发进行时间限制，只有当一定时间内没有再次触发事件时，才执行函数；而节流是规定了一定时间间隔，只有当时间间隔达到后才执行函数。

下面分别介绍一下防抖和节流的应用场景和具体实现方式。

防抖的应用场景

以下是防抖的一个经典应用场景：用户输入关键字搜索联想。

当用户在搜索框中输入一个字母，此时JS代码就会立即执行一次搜索，这样是非常浪费资源的，因为用户通常不会一直连续输入，所以我们可以通过防抖技术限制搜索操作频率。

防抖的具体实现方式

防抖的具体实现方式是，在事件被触发 n 秒后执行回调，如果在这 n 秒内事件被触发，那么会重新计时，直到执行。

以下是防抖的一段示例代码：

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

节流的应用场景

以下是节流的一个经典应用场景：图片懒加载。

在某些网页中，常常有一些图片需要滚动到特定的位置才加载出来。如果滚动过程中频繁的触发图片加载，可能会出现页面卡顿的问题。

这时，我们可以通过节流技术限制触发频率来达到优化的效果。

节流的具体实现方式

节流的具体实现方式是，每隔一定时间执行一次回调函数。

以下是节流的示例代码：

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

JavaScript防抖和节流遇见的奇怪问题及解决

在实际使用防抖和节流的时候，也许会遇到一些问题，下面就两个问题进行介绍和解决。

场景一：函数带参数

在防抖和节流的过程中，如果需要处理的函数带有参数，该怎么办呢？

通过以下代码可以解决该问题：

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

// 传递参数时使用箭头函数
let searchInput = document.getElementById('search-input');
searchInput.addEventListener('input', debounce(() => {
  let value = searchInput.value;
  // 具体的操作代码
}, 500));

场景二：保证函数在最后一次调用后执行

防抖的特点是，只有在最后一次调用时才会执行函数。但是这可能会有一个问题，就是在调用最后一次之后，函数还需要一些时间才能完成执行。

解决这个问题的方式，也是使用防抖，但是使用新的定时器：

function debounce(func, wait) {
  let timer = null;
  return function() {
    let context = this;
    let args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, wait);
    // 使用新的定时器
    setTimeout(() => {
      clearTimeout(timer);
      timer = null;
    }, wait + 100);
  }
}

这样就可以保证函数会在最后一次调用后的一定时间后再执行，避免了函数未能完整执行的问题。

总结

本文介绍了防抖和节流两种前端开发中经常用到的技术，并给出了两个场景下的解决方案，希望能够帮助广大前端开发者更好的利用这两种技术进行开发。