javascript的防抖节流函数解析

下面就来详细讲解“JavaScript的防抖节流函数解析”的完整攻略。

一、防抖函数

1.1 什么是防抖函数？

防抖函数是一种常用的JS功能，用于延迟搜索框或输入框等交互操作的调用时间，以提高用户的体验和性能。防抖函数会等待用户停止操作，并只在停止时才执行一次操作。

1.2 防抖函数的实现

下面是一个基本的防抖函数示例代码：

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

// 调用示例
const func = () => console.log('防抖成功');
const debouncedFunc = debounce(func, 2000);
// 触发执行
debouncedFunc(); // 需要等待2s才会执行函数console.log('防抖成功');

上面的代码中使用了闭包，先声明了一个变量timer，保存了需要延迟执行的函数的上次调用时间，用setTimeout设置了一个定时器，在定时器内部调用函数，以达到了延迟调用的效果。

1.3 防抖函数的案例应用

比如在搜索框中，当我们输入内容后，需要向后端发出请求获取相关联的搜索结果，此时使用防抖函数可以避免在用户正在输入时频繁地向服务器发送请求，从而减轻服务器压力。

const input = document.querySelector('input');
input.addEventListener('input', debounce(function() {
  console.log('我在输入，但是只有等我停顿了2s才会发出请求');
}, 2000));

二、节流函数

2.1 什么是节流函数？

节流函数是另一种JS功能，也用于在频繁的调用中优化性能，但与防抖不同，节流只会在固定时间间隔内调用一次特定的函数。

2.2 节流函数的实现

下面是一个基本的节流函数示例代码：

function throttle(fn, delay) {
  let lastTime = 0;
  return function() {
    const nowTime = +new Date();
    if (nowTime - lastTime > delay) {
      fn.apply(this, arguments);
      lastTime = nowTime;
    }
  };
}

// 调用示例
const func = () => console.log('节流成功');
const throttledFunc = throttle(func, 2000);
// 触发执行
throttledFunc(); // 第一次触发会立即执行函数console.log('节流成功');
throttledFunc(); // 连续触发则只会在2s内调用一次函数console.log('节流成功');

上面的代码中使用了闭包，先声明了一个变量lastTime，保存了函数上次执行的时间，当下次调用函数时，如果与上次调用相距小于delay的时间，则不执行该函数。

2.3 节流函数的案例应用

比如在 DOM 元素的 drag 或 drop 事件中，更新 UI 太频繁会影响性能，使用节流函数可以避免频繁触发 UI 渲染。

element.addEventListener('drag', throttle(function() {
  console.log('在拖动，但是只有每2s才会进行一次 UI 更新');
}, 2000));

这就是JavaScript防抖节流函数的基本实现原理和应用场景，希望对你有所帮助！