监听事件模拟,节流
和防抖
都是用来控制某些函数的调用频率
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前端
(我们的宗旨是,为了加班,为了秃顶……,仰望大佬),希望小伙伴们加群一起学习