js面试必备：函数防抖和函数节流

什么是防抖和节流

防抖(debounce)：当持续触发高频事件时，n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。（也就是说多次触发该事件，该事件只会被触发一次，且是最后一次）
节流(throttle)：当持续触发高频事件时，n秒内只会执行一次（也就是说该事件只会被触发一次，且是第一次触发后面的就不会触发）
防抖和节流都是限制函数的执行频率，函数执行频率过高导致性能问题

1、防抖

实现：在执行函数时加一个定时器，每次执行都要清除定时器

	function debounce(fn,time) {
	let timer=null;//用来储存定时器返回值
	return (e)=>{
		clearInterval(timer)//每次执行前都要清除定时器
		timer=setTimeout(()=>{
			fn.apply(this,arguments)
		},time)
	}
}
	function hello(){
		console.log("hello");
	}
	let e=document.querySelector("button")
	e.addEventListener("click",debounce(hello,500))

应用：评论点赞，搜索联想

2、节流

实现：在执行函数时加一个定时器，每次执行都要判断定时器的结果是否存在，如果存在就不执行

function throttle(fn, time) {
	 let timer = null
	return function (){
		if(timer){
			return
		}
		timer = setTimeout(()=>{
			fn.apply(this,arguments)
			timer = null //执行完记得清除
		},time)
		
	}
}
function hello(){
		console.log("hello");
}
let e=document.querySelector("button")
e.addEventListener("click",throttle(hello,500))

应用场景：滚动条事件监听