什么是防抖和节流？有什么区别？如何实现

在前端的面试中，经常会问到 防抖 和 节流 的问题，这里我简单的说一下自己的理解。

防抖：

• 在任务高频率触发的时候，只有触发间隔超过指定间隔的时间，任务才会执行

• 在每次函数执行之前先清空上一次设置的定时器，原因是：如果执行间隔大于n秒，那么先前的定时任务一定已经执行完毕，当执clearTimeout时，其实并没有定时器可清楚，否则定时器会被清除，然后重新计时

function debounce (fn,wait,immediate){
	  var timer = null;
	  console.log(fn,wait,immediate,'aaa')
	  return ()=>{
	    //判断首次是否需要立即执行
	    if(immediate){
			console.log('立即执行')
	      fn.call(this,arguments)
		  immediate = false;
	    }
		//清除定时器
		clearInterval(timer)
		timer = setTimeout(()=>{
			console.log('再次执行')
			fn.call(this,arguments)
		},wait)
	  }
}

节流：

• 在指定间隔内任务只执行一次

• 在每次函数执行之前，先判断是否存在定时器，存在则跳过本次执行，否则设置新的定时器

function debounce (fn,wait,immediate){
	  var timer = null;
	  console.log(fn,wait,immediate,'aaa')
	  return ()=>{
	    //判断首次是否需要立即执行
	    if(immediate){
			console.log('立即执行')
	      fn.call(this,arguments)
		  immediate = false;
	    }
		
		//如果当前存在定时器，返回；否则设置定时器
		if(timer) return ;
		//清除定时器
		clearInterval(timer)
		timer = setTimeout(()=>{
			console.log('再次执行')
			fn.call(this,arguments)
		},wait)
	  }
}

区别：

• 一定时间内任务执行的次数
• 节流 – 被调用n次，只在time间隔时间点运行
• 防抖 – 被调用n次，只执行一次