防抖

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

节流

function throttle(fn, delay){
	let valid = true;
	return function(){
		if(valid) {
			setTimeout(()=> {
				fn.apply(this, arguments);
				valid = true;
			}, delay)
			valid = false;
		}
	}
}

结合应用场景

• debounce

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

• throttle

  • 鼠标不断点击触发，mousedown(单位时间内只触发一次)

  • 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断