节流防抖,前端水龙头,开它

112 阅读1分钟

监听事件模拟,节流防抖都是用来控制某些函数的调用频率

useEffect(() => {
    // window.addEventListener('resize', throttle(resize, 1000));  节流
    // window.addEventListener('resize', debounce(resize, 700));   防抖
}, [])

const resize = (w) => {
    let a = "fuck"
    console.log(a, w);
}
  • 防抖 , 防抖的函数不会立即执行
const debounce = (func, delay) => {
    var timer = null;
    return () => {
      clearTimeout(timer)
      timer = setTimeout(() => {
        func.apply(this, arguments)
      }, delay)
    }
}
  • 节流,节流的函数会立即执行
  • 节流方法一,(八门遁甲第二道门【生门】:开)
const throttle = (func, delay) => {
    var timer = null;
    return () => {
      if(!timer) {
        func.apply(this, arguments);
        timer = setTimeout(() => {
          timer = null
        }, delay)
      }else {
        console.log("Fxxk !!!!!!!!!")
      }
    }
  }
  • 节流方法二,(八门遁甲第三道门【伤门】:开)
const throttle = (func, delay) => {
    var last = 0;
    return () => {
      var now = Date.now();
      if(now > last) {
        func.apply(this, arguments)
        last = now + delay;
      }else {
        console.log("gun!!!!!!!!!!!!!!!")
      }
    }
  }
  • 实例
const useDebouncedEffect = (effect, delay, deps) => {
    const callback = useCallback(effect, deps);
    useEffect(() => {
        const handler = setTimeout(async () => {
            callback();
        }, delay)
        
        return () => {
            clearTimeout(handler);
        }
    }, [callback, delay])
}

useDebouncedEffect(() => initTempConfig(), 1500, [focus]);

结语

前端react QQ群:788023830 ---- React/Redux - 地下老英雄

前端交流 QQ群:249620372 ---- FRONT-END-JS前端

(我们的宗旨是,为了加班,为了秃顶……,仰望大佬),希望小伙伴们加群一起学习