JavaScript 防抖和节流

一、防抖

1.1防抖的基本概念
防抖:动作发生一定时间后再执行，如果在这段时间内再次触发，则需要重新等待一段时间后再触发。

1.2源码
function debounce(fn,time){
let timerId =null;
return()=>{
clearTimeOut( timerId)
timerId =setTimeOut（（）={
fn.apply（this，arguments）
}，time）
}
}
二、 节流
2.1节流的基本概念
节流：动作发生后一定时间后再执行，如果在这段时间内再次触发，则忽略该动作，直到执行完成，如有触发才会再次响应。
2.2源码
function debounce（fn,time）{
let activtmie=0;
return()=>{
const currentTime =Date.now()
if(currentTime-activtmie>time){
fn.apply(this,arguments)
avtiveTime=Date.now（）
}
}

三 防抖与节流一般在哪里使用
在一些高频率事件触发的场景下我们不希望对应的事件处理函数多次执行的时候，可以使用防抖和节流，比如：

滚动事件
输入的模糊搜索
轮播图切换
点击操作

浏览器默认情况下都会有自己的监听时间间隔（以谷歌浏览器为例，大概在4-6毫秒，就会去监听一下事件是否有发生），如果检测到多次事件的监听执行，那么就会造成不必要的资源浪费）