函数防抖和节流归纳

函数防抖和节流概念

常用节流，提交按钮的防重点;常用防抖，input框对输入内容的自动联想

在Lodash这个强大的JS工具库里面也有函数防抖和函数节流，可以直接通过lodash引入方法

防抖（debounce）

概念:在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。
应用：以百度输入框例，比如你要查询XXx，想实现输完了XXx之后，再进行搜索请求，这样可以有效减少请求次数，节约请求资源。

节流（throttle）

概念:连续执行函数，每隔一定时间执行函数。规定一个单位时间，在这个单位时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被触发多次，只有一次能生效。
应用：鼠标连续多次click事件，mousemove 事件，拨打电话，监听滚动事件，比如是否滑到底部自动加载更多等等…

函数代码

防抖（定时器）：
// 第一次触发需要等待wait，延迟结束后调用
（Select搜索框内容发生变化）
（在输入框输入内容完成400毫秒后才会请求，在操作完成后等待一段时间执行）
/**
*description ：防抖
*@params {function} fn 执行函数
*@params {number} wait 时间
*/
function debounce(fn, wait = 400) {
	let timer = null
	return function(){
		if(timer) clearTimeOut(timer)
		timer = setTimeOut(()=>{
		fn.apply(this, arguments)
		timer = null
		},wait)
	}
}

节流（时间戳）：
// 第一次触发时不需要等待wait，延迟开始前调用
(Select滚动条滚动)
（在400毫秒内一直触发，等400毫秒才执行函数
一直触发，会每隔固定的时间触发一次函数）
function throttle(fn, wait = 400){
	let _lastTime = null
	return function(){
		let _nowTime = +new Date()
		if(_nowTime - _lastTime > wait || !_lastTime ) {
		fn.apply(this, arguments)
		_lastTime = _nowTime 
		}
	}
}