2023-2-21 记录简单防抖节流

这破烂生活

已于 2023-02-21 17:40:48 修改

阅读量138

点赞数 1

文章标签： javascript vue

于 2023-02-21 16:58:26 首次发布

本文链接：https://blog.csdn.net/weixin_54033736/article/details/129145378

版权

文章展示了在Vue3环境下如何编写防抖(debounce)和节流(throttle)函数。防抖函数用于限制函数的频繁执行，文中提供了两种实现方式，一种是立即执行，另一种是不立即执行。节流函数则确保函数在设定的时间间隔内只执行一次。这两个函数常用于优化性能，比如在输入事件或滚动事件处理中。

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

// 防抖 因为返回的是一个function，没有执行，这里写了立即执行  
let timer: any;
function delay(callback: any, ms: number) {
    return (function () {
        if (timer != null) {
            clearTimeout(timer);
        }
        timer = setTimeout(callback, ms);
    })();
}
function fn() {
    console.log('那小子真帅');
}

// 回车事件
let searchContent = () => {
    delay(fn, 1000);
};

==================================================》
// 执行返回的方法，就不用写立即执行

let timer: any;
function debounce(callback: any, ms: number = 1000) {
  return function () {
    if (timer != null) {
      clearTimeout(timer);
    }
    timer = setTimeout(callback, ms);
  };
}
// function debounce(callback: any, ms: number = 1000) {
//   clearTimeout(timer);
//   timer = setTimeout(callback, ms);
// }

export default debounce;


// 调用页面
import debounce from "@/utils/debounce";
let fn = () => {
  console.log("那小子真帅!");
};
let debounceEvent = debounce(fn, 1000);
let clickBtn = () => {
  debounceEvent();
};

// 节流
let timer: any = null;
export const throttle = (fn: Function, delay: number): Function => {
  return (...args: unknown[]) => {
    if (timer) {
      return;
    }
    timer = setTimeout(() => {
      fn.apply(this,args);

      timer = null;
    }, delay);
  };
};

==========================================>
// function throttle(fn: Function, delay: number) {
//   return () => {
//     if (timer) {
//       return;
//     }
//     timer = setTimeout(() => {
//       // 一般直接执行也行 fn.apply(this);
//       fn();

//       timer = null;
//     }, delay);
//   };
// }

// export default throttle;