防抖节流函数？防抖节流Hooks

2024 年 5 月 9 日 星期四(已编辑)
/ , ,
15
摘要
防抖函数和节流函数在JavaScript中常用于控制函数的执行频率。防抖函数通过延迟执行来避免连续触发，而节流函数则限制函数在一定时间内只能执行一次。可以使用React Hooks来实现这两种函数，提高逻辑复用性。
这篇文章上次修改于 2024 年 5 月 9 日 星期四，可能部分内容已经不适用，如有疑问可询问作者。

防抖函数

// 定义一个防抖函数
function debounce(fn,wait) {
​
    // 创建一个定时器并初始化为null
    var timer = null;
​
    return function () {
        // 保存函数执行上下文和参数
        var context = this,
        args = [...arguments];
​
        // 如果定时器存在则清除定时器
        if(timer){
            clearTimeout(timer);
            timer = null;
        }
​
        // 重新定时
        timer  = setTimeout(() => {
            // fn.apply(context, args) 是 JavaScript 中的一种函数调用方式，
            // 它的作用是在指定的上下文（context）中调用函数（fn），并且以数组形式传递参数（args）给该函数。
            fn.apply(context,args);
        },wait)
    }
}

防抖Hooks

写成 Hooks 有助于提高逻辑复用性，可以使用已有的 React Hooks 来进行状态管理

// useDebounce.tsx
export default function useDebounce(fn,wait){
  const [timer,setTimer] = useState(null)
  
  return function(...args){
    if(timer){
      clearTimeout(timer)
    }
    
   const newTimer = setTimeout(() => {
      fn(...args);
    }, wait);

    setTimer(newTimer);
  }
}
// test.tsx
function test(){
  const debounce = useDebounce(myAction,1000);
  
  function myAction(){
    // 执行逻辑
  }
  
  return  <button onClick={debounce}>
      Click me
    </button>
}

节流函数

function throttle(fn,wait){
    var preTime = Date.now()

    return function(){
        var context = this,
        args = [...arguments],
        nowTime = Date.now()

        if(nowTime - preTime >= wait) {
            preTime = Date.now()
            return fn.apply(context,args)
        }
    }
}

节流Hooks

export default function useThrottle(fn,wait){
  const [preTime,setPreTime] = useState(Date.now())
  
  return function(...args){
    var args = [...arguments],
        nowTime = Date.now()
    
    if(nowTime - preTime >= wait) {
      setPreTime(nowTime)
      return fn(...args)
    }
  }
}
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...