前端优化 - 防抖和节流

2023-12-30 20:35:57

📢?鸿蒙专栏:想学鸿蒙的,冲

📢 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); 

}

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

? 结语

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

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

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

文章来源:https://blog.csdn.net/qq_41152573/article/details/135293976
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。