前端优化 - 防抖和节流

📢 鸿蒙专栏：想学鸿蒙的，冲

📢 C语言专栏：想学C语言的，冲

📢 VUE专栏：想学VUE的，冲这里

📢 CSS专栏：想学CSS的，冲这里

📢 Krpano专栏：想学VUE的，冲这里

🔔 上述专栏，都在不定期持续更新中！！！！！！！！！！！！！

目录

[✨ 前言](#✨ 前言)

防抖(debounce)

节流(throttle)

[✨ 结语](#✨ 结语)

---

✨ 前言

在前端开发中,我们经常需要绑定处理函数到一些频繁触发的事件上,如scroll、resize、input等。如果事件处理函数执行频率过高,会对页面性能产生很大影响。

防抖(debounce)

防抖的原理是:触发事件后,延迟一段时间执行处理函数,如果在延迟时间内再次触发事件,会重新开始延时。

防抖可以使用的场景:

• 输入框实时搜索Suggest
• 窗口resize时调整样式

示例代码:

function debounce(func, delay) {
  let timer = null;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func(); 
    }, delay);
  }
}

// 输入框搜索uggest
const search = debounce(() => {
  // 获取输入值后请求suggest
}, 500);

input.addEventListener('input', search);

防抖的一般实现步骤:

1、创建一个延迟调用方法,使用闭包保存需要执行的函数

function debounce(func, delay) {

  let timeout;

  return function() {
    
    // 保存函数执行上下文和参数,传递给延迟函数
  }

}

2、每次事件触发时,都清除之前的延时调用

function debounce(func, delay) {

  let timeout;

  return function() {
    clearTimeout(timeout);
    
    // 省略
  }

}

3、设置一个新的延时调用

function debounce(func, delay) {

  let timeout;

  return function() {
    clearTimeout(timeout);

    timeout = setTimeout(() => {
      func();
    }, delay);
  }

}

4、考虑附加参数并返回函数调用结果

function debounce(func, delay) {

  return function(...args) {
    clearTimeout(timeout);
    
    timeout = setTimeout(() => {
      return func(...args);
    }, delay);
  }

}

返回一个可以取消延时的函数

function debounce(func, delay) {

  let timeout;

  return function(...args) {
    clearTimeout(timeout);
    
    timeout = setTimeout(() => {
      func(...args);
    }, delay);

    return () => clearTimeout(timeout);
  }

}

这样就实现了一个功能较完整的防抖函数,在不断调用时只执行最后一次,并可以通过返回的函数取消延迟。

节流(throttle)

节流的原理是:触发事件一段时间内只执行一次处理函数。

节流可使用的场景:

• 滚动加载更多内容
• 限制按钮提交频率

示例代码:

function throttle(func, delay) {
  let prev = 0;
  return function() {
    let now = Date.now();
    if (now - prev > delay) {
      func();
      prev = now;
    }
  }
}

// 滚动加载更多
window.addEventListener('scroll', throttle(() => {
  //请求加载更多数据
}, 500));

来关于节流函数,我也给出一些更完整和详细的实现思路:

1、创建一个可以保存执行时间和方法的闭包

function throttle(func, delay) {

  let lastTime;

  return function() {

    // 保留函数执行上下文和参数
  }

}

2、每次事件触发,比较当前时间和上次时间

function throttle(func, delay) {

  let lastTime = Date.now();

  return function() {

    let now = Date.now();

    if (now - lastTime > delay) {
      // 函数处理逻辑
    }

  }

}

3、在时间差大于阈值时,执行函数并更新最后时间

function throttle(func, delay) {

  let lastTime = Date.now();

  return function() {

    let now = Date.now();

    if (now - lastTime > delay) {
      func();
      lastTime = now; 
    }

  }

}

4、考虑附加参数并返回函数执行结果

function throttle(func, delay) {
  
  return function(...args) {

    // 时间比较逻辑

    return func(...args);

  }

}

5、返回取消延时的方法

function throttle(func, delay) {

  let timeout;

  // 实现逻辑  

  return () => clearTimeout(timeout); 

}

这样就实现了一个具有基本功能的节流函数,它可以帮助我们限制函数执行频率,避免过快调用。

✨ 结语

防抖和节流都是优化高频率执行事件的技巧。区别在于:

• 防抖是将多次执行变为最后一次执行
• 节流是将多次执行变成每隔一段时间执行

根据需要选用合适的方式,可以有效避免页面过渡渲染,提升性能。