前端防抖和节流

最新推荐文章于 2024-08-21 15:43:48 发布

清云随笔

最新推荐文章于 2024-08-21 15:43:48 发布

阅读量5.6k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/zq18877149886/article/details/130841038

版权

防抖和节流是优化性能的技术，主要利用闭包原理。防抖用于限制函数的频繁调用，如登录防止多次请求，窗口resize事件处理。节流则确保单位时间内函数只执行一次，适用于鼠标点击事件、滚动加载等场景。提供的代码示例展示了防抖和节流函数的实现。

摘要由CSDN通过智能技术生成

防抖和节流的区别
防抖：短时间内触发了多个setTimeout只会执行最后一个，每次执行都会先清除前一个定时器，再重新执行新的定时器；
节流：短时间内触发多个setTimeout，只会执行第一个，当第一个执行完后，才可以继续触发后面的setTimeout；

原理概念：防抖和节流的原理都使用到了闭包的概念：闭包的好处是里面的变量只会在闭包中使用，也就是外部的函数是不能使用这个变量的，也就不会修改这个变量，就不会受到外部的污染

使用场景（具体因人而异，还得看需求场景是怎么样的）

防抖

登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖；
调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖；
文本编辑器实时保存，当无任何更改操作一秒后进行保存。

节流

鼠标连续不断地触发某事件（如点击），单位时间内只触发一次；
监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断。例如：懒加载；
浏览器播放事件，每个一秒计算一次进度信息等。

防抖代码：


// 防抖
export const debounce = (
  fn: (args: any) => void,
  delay: number | undefined
) => {
  let timer: string | number | NodeJS.Timeout | undefined;
  return (...args: any) => {
    if (timer) clearTimeout(timer);

    timer = setTimeout(() => {
      fn(...args);
    }, delay);
  };
};

节流


// 节流
export function throttle(fn: Function, delay: number) {
  let lock = true;
  return () => {
    if (lock) {
      lock = false;
      setTimeout(() => {
        fn(arguments);
        lock = true;
      }, delay);
    }
  };
}