【js手撕经典】防抖节流

防抖

防抖是指，短时间频繁触发fn，只执行最后一次，可以有效提高性能，减少服务器压力
原理：函数在n秒后再执行，如果n秒内被触发，重新计时，保证最后一次触发事件n秒后才执行。

/*
* @param {Function} callback 回调函数
* @param {Number} delay 回调函数在delay ms 后执行
* @param {Boolean} immediate 是否立即执行回调
**/
function debounce(callback,delay=300,immediate=true){
	let time = null;
	//返回一个闭包
	return (...args)=>{
		//存在定时器则清空，重新计时
		if(timer){
			clearInterval(timer)
			timer = null;
		}
		//若不立即执行
		if(!immediate){
			timer = setTimeout(()=>{
				callback.apply(this,args)
			},delay)
		}else{
			//立即执行
			//timer为空则代表此时不在delay中，可以立即执行
			let falg = !timer
			flag && callback.apply(this,args)
			timer = setTimeout(()=>{
				timer = null
			},delay)
		}
	}
}

节流

函数在一段时间内只会执行一次，如果多次触发，那么忽略执行

时间戳写法：

/*
* @param {Function} callback 执行函数
* @param {Number} delay 
*/
function throttle(callback,delay=3*1000){
	//上一次执行的时间
	let start = new Date().getTime()
	return (...args)=>{
		//这一次触发的事件
		const now = new Date().getTime();
		//如果相邻两次触发事件超过设置的delay，说明已经过了限制事件，可以执行函数。
		if(now - start >= delay){
			//更新start，方便下次对比
			start = now
			//执行函数
			return callback.apply(this,args)
		}
	}
}

定时器写法：

/*
* @param {Function} callback 执行函数
* @param {Number} delay 
*/
function throttle(callback,delay = 3*1000){
	let timer = null;
	let isThrottle = false;
	return (...args)=>{
		if(!isThrottle)=>{
			fn.apply(this,args);
			isThrottle = true;
			timer = setTimeout(()=>{
				isThrottle = false;
				timer = null;
			},delay)
		}
	}
}