js防抖和节流

概念解释：

函数节流：频繁触发但只会在特定的时间内执行一次；

函数防抖：频繁触发但是只会在特定的时间内没有触发执行条件才执行一次；

函数节流：

函数节流最常用的方式就是在监听页面元素滚动时用到，因为滚动事件是一个高频触发的事件；

示例代码：

var canRun = true;

document.getElementById("main").οnscrοll=function(){

  if(!canRun){

   return;//判断是否空闲，如果空闲直接返回

  }

canRun = false;

setTimeout(function(){

   console.log("函数节流")

  canRun = true;

},300)

}

函数防抖

一般用于注册登录时，用户进行手机号验证和邮箱验证；这里还是用滚动元素进行示例；

 var  timer= false;

document.getElementById('main').οnscrοll=function({

clearTimeOut(timer);

timer=setTimeOut(function(){

 console.log('函数防抖')

},300)

})