js函数的节流与防抖

js函数的节流与防抖

	在看面经的时候，会看到有些问js函数的节流与防抖，所以做了一个自己的总结
	主要的一个学习思路：
	1.为什么要使用节流与防抖
	2.了解什么是节流与防抖
	3.节流与防抖的实现思路

为什么要使用节流与防抖
在开发的过程中，我们会遇到一个问题，就是面对一个按钮或者一个事件的持续触发，在频繁的事件回调和计算中，很有可能会出现页面卡顿，导致用户体验极差，那么就需要有种解决方案去防止函数的多次调用，此时就衍生出来节流，防抖
什么是节流与防抖，节流与防抖的实现思路
1. 防抖
基于上述场景，提出防抖的思路：在触发事件时不立即执行，而是设置一个时间time（这个时间相当于给了一个延迟执行），在这个时间内，如果又连续触发了事件，那么这几次的连续触发就转换为最后一次的执行，也就是说在规定的延迟执行时间内，多次的执行被合为了一次的执行，即最后一次执行。
这样来看，实现防抖只需要一个可以延迟执行函数的方法，这个方法使用setTimeout定时器来来延迟执行：

			// 触发事件
			btn.addEventListener('click', debounce(fn, 1000))
			// 触发函数
			function fn() {
				console.log("我是防抖")
			}
			//防抖函数
			function debounce(fn, time) {
				// 设置定时器id timer，
				// 初始值为null,闭包
				let timer = null
				return function() {
					let args = arguments,_that = this
					if (timer) {
						clearTimeout(timer)
					}
					// 定时器延迟执行
					timer = setTimeout(function() {
					//更改fn指向
						fn.apply(_that,args)
					}, time)
				}
			}

2.节流
解决多次调用的第二种思路，节流。如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效,即在一定时间内的事件触发无效。实现有两种思路，一是时间差，二是定时器加标识符

		// 需要传递参数是执行函数fn，延迟时间delay
		btn.addEventListener('click', throttle(fn, 1000))
		function fn(){
				console.log("我是节流")
			}
			// 时间差
			function throttle(fn,delay){
				// 初始时间
				 let pre = 0
				    return function() {
				    let args = arguments,_that = this
						// 获取执行时间戳
						var cur = new Date().getTime()
						// 如果两次时间差已经超过规定的时间，那么执行
						if(cur-pre>delay){
							//执行fn,且更新初始时间
							fn.apply(_that,args)
							pre=cur
						}
				    }
			}
			//定时器
			function throttle(fn,delay){
				let timer
				return function(){
					let args = arguments,_that = this ;
					if(timer){
						return
					}
						timer = setTimeout(function(){
							fn.apply(_that,args)
							timer=null
						},delay)
					}
				}
			}

对于函数防抖，有以下几种应用场景：

给按钮加函数防抖防止表单多次提交。
对于输入框连续输入进行AJAX验证时，用函数防抖能有效减少请求次数。
判断 scroll 是否滑到底部， 滚动事件 + 函数防抖
总的来说，适合多次事件 一次响应 的情况

对于函数节流，有如下几个场景：

游戏中的刷新率
DOM元素拖拽
Canvas画笔功能
总的来说，适合 大量事件 按时间做 平均 分配触发。