js防抖节流公共函数

‍三月的狮子

已于 2023-06-12 15:30:33 修改

阅读量118

点赞数 1

文章标签： javascript 微信小程序

于 2023-06-08 17:20:51 首次发布

本文链接：https://blog.csdn.net/qq_40703755/article/details/131112306

版权

文章提供了一组JavaScript函数封装示例，包括防抖(debounce)和节流(throttle)函数的实现。防抖函数确保在给定时间间隔内只执行最后一次调用，而节流函数则保证在特定时间内只执行一次。此外，还提供了异步版本的节流处理，适用于处理异步操作，如等待异步请求完成后再执行后续动作。

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

1.封装

/**
 * 输入搜索 防抖处理 指定时间 重复调用同一个函数 只会执行最后一次
 * @param {*} func   回调函数
 * @param {*} delay  定时器时间 默认 3s
 */
 shake: function (func,delay = 3000) {
   //结构获取this.data中的属性值 获取到的属性值 如果是基本类型则不能被再次修改 
   //如果是对象则可以修改属性 但是不可以更改对象的指向
   const { timer } = this.data;
   //清楚定时器 使定时器标志ID对应的定时器失效 同时ID不会清除
   if (timer) clearTimeout(timer);
   //直接修改对象中的timer值 setTimeout()回返回一个定时器标志 一个整数ID
   this.data.timer = setTimeout(() => func(), delay);
 },
 /**
  * 节流处理 一定时间内只执行一次 执行第一次函数
  * @param {*} func
  * @param {*} delay
  */
function throttling(func, delay = 3000) {
  //获取节流属性控制
  let { isDisable } = this.data;
  if (!isDisable) {
    this.data.isDisable = true;
    setTimeout(() => {
      this.data.isDisable = false;
    }, delay);
    try {
      func();
    } catch (error) {
      console.log("error :>> ", error);
    }
  }
}
/**
 * 节流处理 只在上次函数执行完毕才能再次执行 异步请求版本
 * @param {*} func
 */
async throttlingPromiseComplete(func) {
  //获取节流属性控制
  let { isDisable } = this.data
  if (!isDisable) {
    this.data.isDisable = true;
    try {
      await func();
    } catch (error) {
      console.log("error :>> ", error);
    } finally {
      this.data.isDisable = false;
    }
  }
},

/**
 * 节流处理 只在上次函数执行完毕才能再次执行
 * @param {*} func
 */
 throttlingComplete(func) {
  //获取节流属性控制
  let { isDisable } = this.data
  if (!isDisable) {
    this.data.isDisable = true;
    try {
      func();
    } catch (error) {
      console.log("error :>> ", error);
    } finally {
      this.data.isDisable = false;
    }
  }
},

2.调用

shake(()=>{
//你需要防抖处理的函数体
},200)
throttling(()=>{
//你需要节流处理的函数体 指定时间 执行第一次
},200)
throttlingPromiseComplete(async ()=>{
//你需要进行的异步操作 无论有没有返回值 await都会等待异步操作完毕后（async 关键字修饰的函数是一个异步操作）async返回的Promise对象
},200)
throttlingComplete(()=>{
//你需要节流控制函数体 指定执行完毕才能再次执行的代码 避免重复提交订单等 同步版本
},200)