js中的防抖和节流
防抖和节流
防抖:短时间内大量触发同一个事件,那么只会执行一次函数(使用setTime,加上一个变量计时)
javascript代码:
function debounce(fn,delay){ let timer=null if(timer){ clearTimeout(timer);//走到这里代表短时间内不是第一次执行这个事件,所以取消当前计时,重新开始计时 } timer=setTimeout(fn,delay) //开始或者重新开始计时 }
节流:如果短时间内大量触发同一个事件,那么在函数执行一次之后,该函数在指定的事件期限内不再执行,直至过了这段时间才重新生效(实现:借助setTimeout,加上一个状态为state来表示函数是否处于工作状态)
javascript代码:
function throttle(fun,delay){ let timer=null; return function(){ if(!timer){ timer=setTimeout(function(){ fun(); timer=null },delay) } } }
js防抖和节流的比较:
相同点:
都通过setTimeout()实现
目的都是,降低回调执行频率,节省计算资源
不同点:
函数防抖在一段连续操作结束后,处理回调,利用clearTimeout和setTimeout实现。函数节流,在一段连续操作中,一段时间只执行一次,频率较高的事件中使用来提高性能。
函数防抖关注一定事件连续触发的事件只在执行一次,函数节流侧重于一段时间只执行一次.
应用场景:
函数防抖:搜索框输入搜索。只需用户最后一次输入完,再发送请求.
手机号,邮箱验证
函数节流:滚动加载,高频率点击提交,表单重复提交的问题