浅谈函数防抖和节流

函数防抖和接口

debounce 函数防抖

函数防抖，从字面上理解就是希望函数被频繁调用的时候，在指定时间间隔内，只会被调用一次。

throttle 函数节流

函数节流，从字面上理解就是希望函数在指定间隔内（按照我们设定的频次）触发一次。
其实说白了，函数防抖和函数的节流的最终目的还是为了节省资源。比如防止过于频繁的请求接口服务等等。根据两者特性，我也模拟出一种场景来对两者进行解释。具体场景如下：某当红明星在某个城市开演唱会，某麦上提供抢票，如何避免用户频繁点击抢票按钮向服务端发送请求，可以运用防抖或者节流来进行处理：

上述图片中确认和下单按钮都能触发抢票的接口服务，为了实现能够有效的控制用户的请求，可以使用防抖或者是节流的方法进行处理，其中下单使用了函数防抖，而确认则用了函数节流，代码使用vue场景进行实现：

debounce

function debounce (func, delay) {
   
	delay = delay || 500
	let timer = null
	retun function () {
   
		let _this = this
		let _args = arguments
		if (timer) clearTimeout(timer)
		timer = setTimeout(() => {
   
			func.apply(_this, _args)
		}, delay)
	}
}

上述代码执行在触发事件后函数 delay毫 秒后才执行，如果我在触发事件后的delay毫秒内又重新触发了事件，则会重新计算函数执行时间。（如果设置delay为1000，那么使用func debounce 后，1秒会执行所要的操作，如果用户在1秒内又去触发要执行的操作，那么debounce会重新被触发，并且延时1秒后执行，也就是说你不停的去触发要执行的函数时，间隔时间小于1s内都不会被触发成功）,如果想要立即执行，需要对debounce进行改造：

function debounce (func, delay) {
   
	delay = delay || 500
	let timer = null
	retun function () {
   
		let _this = this
		let _args = arguments
		let handleNow = !time
		if (timer) clearTimeout(timer)
		timer = setTimeout(() => {
   
			timer = null
		}, delay)
		if (handleNow) func.apply(_this, _args)
	}
}

执行函数立即执行的代码于最初的代码的区别在于一个是delay后看到效果，一个是立即看到效果。

throttle

function throttle (func, delay) {
   
	let previous = 0
	let timer