js实现函数防抖节流

一、什么是函数防抖跟节流？

函数防抖： 在事件被触发n秒之后在执行回调函数，如果在n秒内又被触发 ，则重新计时。
函数节流： 规定一个单位时间，规定在这个时间内，只能执行一次回调函数，如果在这个时间内呗触发多次，则只有一次失效。表现形式就是它有自己的一个执行频率。

二、JavaScript实现

1.函数防抖

代码如下（示例）：

function debounce(callback, wait) {
	let timer = null;
	return function(){
		let _this = this,
		arg = arguments;
		if(!!timer){
			clearTimeout(timer)
			timer = null
		}
		timer = setTimeout(function(){
			callback.call(_this,arg)
		},wait)
	}
}
let _debounce = debounce(function() {
	console.log('dshdihdi')
}, 1000)

2.函数节流

代码如下（示例）：

// 函数节流，时间戳版本
function throttle(callback, wait) {
	let time = new Date().getTime();
	return function() {
		let _this = this,
		arg = arguments;
		let nowTime = new Date().getTime();
		if (nowTime - time >= wait){
			callback.call(_this,...arg)
			time = nowTime
		}
	}
}
let _throttle = throttle(function(e) {
	console.log(e)
	console.log(arguments)
}, 1000)

3.使用场景

函数节流： 懒加载分页请求资源、音乐播放进度条更新等等

函数防抖： 频繁操作点赞、登录注册、需要提交最新信息等等