js 避免高频触发，防抖与节流

适用场景

防抖：

1. search搜索联想，用户在不断输入值时，用防抖来节约请求资源
2. window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

节流：

1. 鼠标不断点击触发，mousedown(单位时间内只触发一次)
2. 监听滚动事件，比如是否滑到底部自动加载更多

代码

防抖：

let timer = null;
function debounce(){
    
    
	clearTimeout(timer);
	timer = null;
	timer = setTimeout(()=> {
    
    
		console.log('防抖成功！')
	}, 1000)
}

节流：

function throttle(){
    
    
	let valid = true;
	if(valid) {
    
    
		setTimeout(()=> {
    
    
			console.log('节流成功！')
			valid = true;
		}, 1000)
		valid = false;
	}
	
}

总结：

二者相同点：

防抖和节流都是为了阻止操作高频触发，从而浪费性能。

二者区别

防抖 是触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。适用于可以多次触发但触发只生效最后一次情景。

节流 是高频事件触发，但在n秒内只会执行一次，如果n秒内触发多次函数，只有一次生效。