手写防抖

什么是防抖

防抖就是将函数的执行延迟一段时间，如果在该时间内重新触发事件，那么延迟时间会被重置，只有真正达到延迟时间，才回执行函数

防抖的应用场景

  • 输入框频繁输入内容，搜索或者提交信息
  • 频繁点击按钮，触发某个事件
  • 监听浏览器滚动事件
  • 监听用户缩放浏览器resize事件

简易版实现

const debounce = (func , delay = 50 ) => {
	let timer;
	return function(...args) {
		if(timer) clearTiomeout(timer);
		timer = setTimeout(()=>{
			func.apply(this,args);
		}, delay);
	}
}

手写节流

什么是节流

指频繁触发事件时，只会在指定的时间段内执行事件回调，即触发事件间隔大于等于指定的时间才会执行回调函数。通俗的来说，节流类似技能的CD，不管你按几下，都得要等CD结束后才能释放技能。

节流的应用场景

  • 拖拽场景：固定时间内只执行一次，防止超高频次触发位置变动。DOM 元素的拖拽功能实现（mousemove）
  • 缩放场景：监控浏览器resize
  • 滚动场景：监听滚动scroll事件判断是否到页面底部自动加载更多
  • 动画场景：避免短时间内多次触发动画引起性能问题

简易代码实现

const throttle = (func, delay) => {
	let timer = 0;
	return function(...args) {
		if(timer) return;
		timer = setTimeout(()=>{
			func.apply(this,args);
			timer = 0;
		},delay);
	}
}