戏说前端 JavaScript 之『防抖节流』基础知识

前端

2024-01-13 10:24:25

函数防抖和函数节流是前端开发中常用的两种优化性能的技术，它们都可以用来减少函数的执行次数，从而提高程序的运行效率。

函数防抖

函数防抖的原理是，在规定时间内只执行一次函数。如果在规定时间内函数被多次触发，那么只有最后一次触发会真正执行函数，而前面的触发都会被忽略。

函数防抖通常用于处理一些需要在一段时间内只执行一次的事件，例如：

表单验证
搜索框输入
窗口滚动

函数节流

函数节流的原理是，在规定时间内只执行一次函数。如果在规定时间内函数被多次触发，那么只有第一次触发会真正执行函数，而后面的触发都会被忽略。

函数节流通常用于处理一些需要在一定时间间隔内执行一次的事件，例如：

窗口滚动
鼠标移动
键盘输入

比较

函数防抖和函数节流都是用来减少函数执行次数的技术，但它们的工作原理不同。函数防抖只执行最后一次触发，而函数节流只执行第一次触发。

在选择使用函数防抖还是函数节流时，需要根据具体的情况来决定。如果需要在一段时间内只执行一次函数，那么应该使用函数防抖。如果需要在一定时间间隔内执行一次函数，那么应该使用函数节流。

示例代码

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

// 函数节流
const throttle = (func, delay) => {
  let lastTime = 0;
  return (...args) => {
    const now = new Date().getTime();
    if (now - lastTime > delay) {
      lastTime = now;
      func.apply(this, args);
    }
  };
};