javascript 防抖、节流

一、防抖

防抖——触发高频事件后 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防抖和节流
防抖分立即执行与延时执行