眼花缭乱的js防抖与节流——一个难以忽视的话题

前端

2023-09-21 01:18:55

防抖与节流：
大家好，我是前端开发领域的资深专家，今天我们就来探讨一个在前端业务与面试中经常遇到的问题——防抖与节流。我们一起来探讨这两个技术的原理、实现方案，并通过实际的例子展示它们的作用。

防抖与节流原理：

防抖，又称debounce，是一种延迟执行的技术。它可以防止函数在短时间内被多次调用。它会在一段时间内只执行一次函数，即使在函数被多次调用。

节流，又称throttle，也是一种延迟执行的技术。但是与防抖不同，节流会限制函数在一段时间内只能执行一次。也就是说，函数在一段时间内只能被调用一次，即使函数被多次调用。

何时使用防抖与节流：

通常，当我们需要防止函数在短时间内被多次调用时，我们会使用防抖。例如，在输入框中输入内容时，我们可以使用防抖来防止函数在每次按键时都被调用。这样可以避免对服务器发送过多的请求。

当我们需要限制函数在一段时间内只能执行一次时，我们会使用节流。例如，在拖动滚动条时，我们可以使用节流来防止函数在每次滚动时都被调用。这样可以防止浏览器卡顿。

防抖与节流实现：

防抖和节流都可以通过JavaScript实现。这里我们提供两种实现方式：基于定时器的实现和基于闭包的实现。

基于定时器的实现：

基于定时器的实现是通过使用setTimeout()函数来实现的。在防抖中，当函数被调用时，会设置一个定时器。如果在定时器到期之前函数再次被调用，则会清除之前的定时器并重新设置一个新的定时器。当定时器到期后，函数才会被执行。

在节流中，当函数被调用时，也会设置一个定时器。但是与防抖不同，节流不会清除定时器。当定时器到期后，函数才会被执行。如果在定时器到期之前函数再次被调用，则函数会被忽略。

基于闭包的实现：

基于闭包的实现是通过使用闭包来实现的。在防抖中，当函数被调用时，会创建一个闭包。这个闭包包含函数本身以及一个定时器。当闭包被调用时，它会检查定时器是否已经到期。如果定时器到期，则会执行函数。如果定时器还没有到期，则会重新设置定时器。

在节流中，当函数被调用时，也会创建一个闭包。这个闭包包含函数本身以及一个布尔值。当闭包被调用时，它会检查布尔值是否为真。如果布尔值为真，则会执行函数并把布尔值设为假。如果布尔值为假，则会忽略函数。

实例演示：

为了更好地理解防抖与节流，我们通过一个实例来演示它们的作用。

// 防抖函数
const debounce = (func, delay) => {
  let timer;
  return function(...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
};

// 节流函数
const throttle = (func, delay) => {
  let flag = true;
  return function(...args) {
    if (flag) {
      func.apply(this, args);
      flag = false;
      setTimeout(() => {
        flag = true;
      }, delay);
    }
  };
};

// 使用防抖函数
const input = document.getElementById('input');
input.addEventListener('input', debounce(() => {
  // 在输入框中输入内容时，每隔500毫秒执行一次函数
}, 500));

// 使用节流函数
const scroll = document.getElementById('scroll');
scroll.addEventListener('scroll', throttle(() => {
  // 在滚动条滚动时，每隔200毫秒执行一次函数
}, 200));