javascript 防抖、节流

左手的ㄟ右手 2022-12-18 15:56 146阅读 0赞

## 一、防抖 ##

> 防抖——触发高频事件后 n 秒后函数只会执行一次，如果 n 秒内高频事件再 次被触发，则重新计算时间；

1.  原理  
    短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。缺点是，若短时间内频繁触发，会一直无法执行。
2.  实现  
    （1）延迟执行
    
        function doSomething(){ 
        	console.log(document.body.scrollTop);
        }
        /** * 函数防抖 debounce（延迟执行） * 在第一次触发操作时，延迟操作；后续触发操作时，判断当前是否有timer，有的话直接重置timer，进而实现防抖 * @param { Function } _fn: 事件触发后要执行的操作 * @param { Number } _delay: 延时(ms) * @return { Function }: */
        function debounce(_fn, _delay){ 
        	let timer = null;
        	return function(){ 
        		// 如果距离上一次触发事件的时间间隔小于delay，直接重置计时器
        		clearTimeout(timer);
        		timer = setTimeout(_fn, _delay);
        	}
        }
        // 挂载事件监听器
        let myEventListener = debounce(doSomething, 200);
        window.addEventListener('scroll', myEventListener);
    
    （2）立即执行
    
        function doSomething(){ 
        	console.log(document.body.scrollTop);
        }
        /** * 函数防抖 debounce（立即执行） * 只有timer为null时，才会触发操作；若触发事件时，与上次的间隔时间小于delay，直接停止timer(此时timer仍不为null)；只有当触发事件的时间与上次间隔超过delay，才会将timer设为null; * @param { Function } _fn: 事件触发后要执行的操作 * @param { Number } _delay: 延时(ms) * @return { Function }: */
        function debounce(_fn, _delay){ 
        	let timer = null;
        	return function(){ 
        		let callNow = !timer;
        		clearTimeout(timer);
        		timer = setTimeout(()=>{ 
        			timer = null;
        		}, _delay)
        		if(callNow) _fn();
        	}
        }
        // 挂载事件监听器
        let myEventListener = debounce(doSomething, 200);
        window.addEventListener('scroll', myEventListener);

## 二、节流 ##

> 节流——高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执 行频率。

1.  实现
    
        function doSomething(){ 
        	console.log(document.body.scrollTop);
        }
        /** * 节流函数 throttle * 设置阀门(vaild)；在成功触发操作后，关闭阀门并在一段时间后开启，进而实现节流 * @param { Function } _fn: 事件触发后要执行的操作 * @param { Number } _delay: 阀门开闭最小间隔时间(ms) * @return { Function }: */
        function throttle(_fn, _delay){ 
        	let vaild = true;			// 节流阀门
        	return function(){ 
        		// 只有vaild为true时才会触发操作
        		if(vaild){ 
        			_fn();				// 触发操作
        			vaild = false;		// 关闭阀门
        			setTimeout(()=>{ 	// 一段时间后再开启阀门
        				vaild = true;
        			}, _delay)
        		}
        	}
        }
        // 挂载事件监听器
        let myEventListener = throttle(doSomething, 200);
        window.addEventListener('scroll', myEventListener);

> [浅谈js防抖和节流][js]  
> [防抖分立即执行与延时执行][Link 1]

[js]: https://segmentfault.com/a/1190000018428170
[Link 1]: https://www.cnblogs.com/cc-freiheit/p/10827372.html