JS防抖与节流

 1 什么是防抖？

简单说，就是N秒内，只执行一次某方法，以防止【过度执行同一函数】而造成的内在资源浪费。

// 防抖
	function debounce(fn, delay) {
		let timer = null //借助闭包
		return function() {
			if (timer) {
				clearTimeout(timer)
			}
			timer = setTimeout(fn, delay) // 简化写法
		}
	}
	// 然后是旧代码
	function showTop() {
		var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
		console.log('滚动条位置：' + scrollTop);
	}
	window.onscroll = debounce(showTop,1000) // 为了方便观察效果我们取个大点的间断值，实际使用根据需要来配置

应用场景

页面resize事件（比如，echarts页面发生变化时，再次初始化），常见于需要做页面适配的时候。需要根据最终呈现的页面情况进行dom渲染（这种情形一般是使用防抖，因为只需要判断最后一次的变化情况）

2 什么是节流？

执行一个方法后，需要N秒时间才能再次执行，如游戏技能CD冷却时间。

	// 节流
	function throttle(fn, delay) {
		let valid = true
		return function() {
			if (!valid) {
				//休息时间 暂不接客

				return false
			}
			// 工作时间，执行函数并且在间隔期内把状态位设为无效
			valid = false
			setTimeout(() => {
				fn()
				valid = true; //打开开关
			}, delay)
		}
	}
	/* 请注意，节流函数并不止上面这种实现方案,
	   例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。
	   也可以直接将setTimeout的返回的标记当做判断条件-判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样
	    */


	window.onscroll = throttle(showTop, 2000)

应用场景

input联想搜索文字，搜索框input事件，例如要支持输入实时搜索可以使用节流方案（间隔一段时间就必须查询相关内容），或者实现输入间隔大于某个值（如500ms），就当做用户输入完成，然后开始搜索，具体使用哪种方案要看业务需求。

JS内相关的事件

1. window 的 resize、scroll
2. mousedown、mousemove
3. keyup、keydown
4. input 的 input 事件

 文章仅出于个人理解，有不当之处请指出，谢谢！