javascript之手写防抖节流函数

javascript之手写防抖节流函数

1. 防抖函数 debounce()
   使用场景：监听一个输入框的文字变化后的 change() 事件
   问题点：直接用keyup事件会频繁触发 change() 事件
   防抖：用户输入或暂停时才会触发 change() 事件

function debounce(fn, delay = 500){
	let timer = null;
	return function(){
		if(timer){
			clearTimeout(timer);
		}
		timer = setTimeout(()=>{
			fn.apply(this, arguments);
			timer = null;
		}, delay)
	}
}

2. 节流函数 throttle()
   使用场景：拖拽一个元素时，要随时拿到该元素的位置
   问题点：直接用 drag 事件会频繁触发 ,容易导致卡顿
   节流：无论拖拽速度多快，保持间隔时间触发

function throttle(fn, delay = 200){
	let timer = null;
	return function(){
		if(timer){
			return
		}
		timer = setTimeout(()=>{
			fn.apply(this, arguments);
			timer = null;
		}, delay)
	}
}