2019-08-13

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)
}