2021-11-11 防抖和节流的理解

防抖和节流的理解

防抖

防抖：防止抖动 是单位时间内防止事件多次触发,只触发一次，触发后会被重置。（防抖可以比作上电梯，只要一个人进来后，需要等待）业务场景在登录避免多次操作重复提交

function debounce(fn,delay){
	let timer;
	return function (){
		clearTimeout(timer);
		timer=setTimeout(fn,delay)
	}
}			

节流

节流：控制流量 是单位时间内时间只触发一次。（节流可比作红绿灯过马路，一段时间内只能过一批）。我们可以设计一种类似控制阀门一样定期开放的函数，也就是让函数执行一次后，在某个时间段内暂时失效，过了这段时间后再重新激活（类似于技能冷却时间）。

function throttle(fn,delay){
	let timer
	return function(){
		if (timer){ return }
		timer=setTimeout(()=>{
			fn()
			timer=null
		},delay)
		
	}
}

场景：
1.搜索框input事件，例如要支持输入实时搜索可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值（如500ms），就当做用户输入完成，然后开始搜索，具体使用哪种方案要看业务需求。
2.页面resize事件，常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）