一招了解js函数节流和防抖

js函数节流和防抖

作用：

• 解决事件频繁触发的问题
• 比如js中有一些事件触发的非常频繁，例如mousemove等，导致浏览器性能问题。
• 还能防止频繁向的后端发送请求

1.节流 throttle

1.节流的实现原理 这里的fn就是需要做节流限制的函数，delay是延迟的时间这个就是每个多少时间才触发一次，例如如果这是一个onClick事件的回调 则当你频繁点击这个按钮的时候它并不会一直触发这个事件，而是每隔delay个时间触发一次。实现流程如下：

		function throttle(fn, delay){
			let start = 0
			return function () {
				console.log('throttle...')
				const current = Date.now()
				if(current - start > delay) {
					fn.apply(this, arguments)
					start = current
				}
			}
		}

• 应用场景： 例如现在的一些富文本编辑器，你需要频繁的在这个里面输入文字，这个函数就会频繁的触发，这个时候就可以用节流处理一下。

2.防抖 debounce

• 防抖 这个跟节流略有不同 但是很多场景它们两个都适用。
• 防抖的原理是 还是上面那个例子 ，当你频繁点击按钮时在停下来的一瞬间，等delay个时间 就会触发最后一次点击的效果（只触发最后一次）。实现原理如下：

		function debounce(fn, delay) {
			return function() {
				console.log('debounce...')
				const args = arguments
				if (fn.time) {
					clearTimeout(fn.time)
				}
				fn.time = setTimeout(() => {
					fn.apply(this, args)
					delete fn.time
				}, delay)
			}
		}
		

• 应用场景 ： 比如在这个搜索框中 你输入数据 会有提示的内容出现（例如百度的那种） 你需要搜索一个东西，你只需要最后的结果打上去就行了 这个中间的过程你并不需要，这样就可以减少与后端发送请求的次数，优化代码的性能。
• 这个还可以应用在一些滚动的事件上。