JavaScript的防抖和节流一起来了解下

概念介绍

防抖和节流都是为了减少某些高频率事件的触发次数。在JavaScript中常用于优化性能或者提升用户体验。

防抖（debounce）指的是一段时间内重复触发同一事件，只执行一次函数的方法。可以使用定时器实现，如下代码所示：

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

该防抖函数接受两个参数，第一个为要执行的函数，第二个为等待时间。在等待时间内，若重复触发，只有最后一次会被执行。

节流（throttle）指的是一段时间内执行多次的函数，在一段时间内，只会执行一次。可以通过判断两次执行时间间隔是否超过规定时间来实现，如下代码所示：

function throttle(fn, delay) {
  let timer = null;
  let flag = true;
  return function() {
    const context = this;
    const args = arguments;
    if (flag) {
      flag = false;
      fn.apply(context, args);
      setTimeout(function() {
        flag = true;
      }, delay);
    }
  };
}

该节流函数接受两个参数，第一个为要执行的函数，第二个为等待时间。在等待时间内，多次触发只有第一次会被执行。等待时间结束后，才能执行下一次。

示例说明

防抖用例

比如，我们有一个搜索输入框，用户每输入一个字符就会进行一次搜索，但有可能用户输入速度过快，频繁触发搜索，造成服务器负担过大。可以通过防抖来减少触发次数，从而减轻服务器负担。

const input = document.getElementById("search-input");
input.addEventListener(
  "input",
  debounce(function() {
    // 请求搜索接口
  }, 300)
);

在搜索输入框的input事件上使用防抖，设置300毫秒等待时间，用户输入速度在这个时间内，若进行多次搜索请求，只有最后一次请求会被执行。可以有效减少不必要的请求，减轻服务器负担。

节流用例

比如，我们有一个页面滚动监听事件，通过监听滚动条的滚动高度，实现动态效果，但是由于滚动条滚动过快，频繁触发事件，导致浏览器的运行效率受到影响，甚至会出现页面卡死的情况。可以通过节流来减少事件触发次数，优化性能。

window.addEventListener(
  "scroll",
  throttle(function() {
    // 重绘页面元素
  }, 300)
);

在滚动条监听事件上使用节流函数，设置300毫秒等待时间，每300毫秒重新触发一次事件，可以减轻浏览器运行负担，提高页面运行效率。

总结

防抖和节流都是优化JavaScript的常用技术，通过设置等待时间来控制函数执行频率，提高代码性能或者提升用户体验。具体情况下，使用哪一种技术取决于业务需求。