JS函数节流和函数防抖
函数节流和函数防抖都是优化高频率执行JS代码的方法
函数节流
函数节流:是指JS代码在一定的时间内只能执行一次,就像人多少秒眨一次眼睛一样。
函数节流应用的实际场景,多数在监听页面元素滚动事件的时候会用到。
var canRun = true
document.getElementByID('scroll').onscroll=function(){
if(!canRun)return
canRun = false
var timeA = setTimeout(()=>{
canRun = true
},1000)
}
//判断函数是否空闲,如空闲才会执行定时器代码
函数防抖
函数防抖是指代码在频繁触发时,只有在足够空闲的时间下才能执行,就像公交车在一定时间内,如果持续有乘客刷卡上车,那公交车必须等全部乘客上完车才能开车。
函数防抖的应用场景,最常见的就是用户注册时候的手机号码验证和邮箱验证了。只有等用户输入完毕后,前端才需要检查格式是否正确,如果不正确,再弹出提示语。
var timeB = false
var execute = function(){
clearTimeout(timeB) //清除上一个计时器
var timeB = setTimeout(()=>{
canRun = false
},1000)
}