防抖节流hooks，传入一个普通函数返回一个带有防抖或者节流的函数

原谅我不够洒脱

已于 2022-05-11 10:45:50 修改

阅读量985

点赞数 3

CC 4.0 BY-SA版权

分类专栏： js TS 文章标签：前端 javascript

于 2021-11-24 11:31:34 首次发布

本文链接：https://blog.csdn.net/weixin_44441196/article/details/121511482

js 同时被 2 个专栏收录

14 篇文章

订阅专栏

10 篇文章

订阅专栏

本文介绍如何通过hooksFn方法，接收普通函数、时间间隔和类型参数，创建防抖或节流的处理函数，适用于提升性能的回调函数管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

调用hooksFn方法，通过传入一个普通的函数，返回一个带有防抖或者节流的方法

该方法接接收3个参数，返回一个新函数
param: fn 需要进行防抖节流的普通函数
param: time防抖节流的时间
param: type需要返回的函数时防抖还是节流（notShake:防抖 throttle：节流）

type Type = 'notShake' | 'throttle'


/**
 * @params fn 要处理的方法； time 时间；  type  返回的方法类型(notShake:防抖 throttle：节流)；
 * @return 返回一个防抖的函数 或者 节流的函数
*/
const hooksFn = (fn: Function, time:number, type: Type) => {
  let timer:any = null

  if (type === 'throttle') {
    return function(...args: Array<any>) {
      if (!timer) {
        timer = setTimeout(() => {
          clearTimeout(timer)
          timer = null
        }, time);
        fn(...args)
      }
    }
  } else {
    return function(...args: Array<any>) {
      clearTimeout(timer)
      timer = null
      timer = setTimeout(() => {
        clearTimeout(timer)
        timer = null
        fn(...args)
      }, time);
    }
  }
}


export default hooksFn