js函数防抖与节流

应用：当我们在监听浏览器窗口变化，滚动，输入框变化等事件的时候，这些事件的触发频率很高，如果回调里处理的逻辑较为复杂，这样会给浏览器造成很大的负担甚至导致浏览器崩溃，这时我们就需要通过防抖或节流来限制事件的触发频率。

1、防抖：给定一个时间长度，在这个时间长度内，如果某两次事件的触发间隔大于给定的时间长度，则进行事件逻辑处理，如果两次事件的触发间隔不大于给定时间长度，则会重置此时间，也就是说，如果事件一直在触发，且触发事件的时间间隔没有大于给定时间长度，则事件逻辑处理函数将一直不会触发，直到触发至间隔大于给定时间时才触发。

//函数防抖
function debounce(fn,t) {
	let timer = null
	return function() {
		let params = [].slice.apply(arguments)
		timer && clearTimeout(timer)
		timer = setTimeout(() => {
			fn.apply(this,params)
		},t)
	}
}

2、节流：同样给定一个时间长度，在这个给定的时间长度内，只要触发了事件，无论多少次，有且只会进行一次事件逻辑处理。

function throttle(fn,t) {
	let flag = false
	return function() {
		if(flag) return 
		flag = true
		setTimeout(() => {
			fn.apply(this,arguments)
			flag = false
		},t)
	}
}

注意：这里我们要明白，防抖和节流的只是事件的业务逻辑，并不是限制的事件本身的触发。