函数防抖和函数节流

首先分别用一句话区分函数防抖和节流的区别。
函数防抖是动作发生后一定时间后触发事件，在这段时间内，如果该动作又发生，则重新等待一定时间再触发事件。
函数节流是动作发生后一段时间后触发事件，在这段时间内，如果动作又发生，则无视该动作，直到事件执行完后，才能重新触发。

针对一些频繁触发的事件如scroll、keyup、resize，如果正常绑定事件的话，可能在很短的时间内连续触发事件，十分影响性能。

这里可以用防抖和节流来优化页面。
函数防抖
举个栗子，用户的输入事件keyup怎么处理呢？

 timer=null; 
 keyupHandler(){
     this.timer && clearTimeout(this.timer);
     this.timer =  setTimeout(this.getData.bind(this),2000)
  } 
  
 getData(): void {
    this.options={
       "acctNo":this.acctNo,
       "keyword":this.keyWord     
    };  
    this.bdService
      .getDataByPost(this.getEmpUrl,this.options)
         .then((res)=>{
            if ( res.code === 0) {
              this.empInfo=res.data;
            }
       })
 }

每次事件被触发，都会先清除当前的timer然后重新设置超时调用，使得每次触发都会取消前一次的超时调用，只有当用户停止相应动作，最后一次事件会在2秒之后触发。

函数节流
同样是输入事件keyup，每隔2s触发一次。

canRun:boolean=true;
keyupHandler(){
  if (!this.canRun) {
      return;
     }
     this.canRun = false;
     setTimeout(function(){
      this.options={
         "acctNo":this.acctNo,
         "keyword":this.keyWord     
       };  
    this.bdService
         .getDataByPost(this.getEmpUrl,this.options)
         .then((res)=>{
           if ( res.code === 0) {
             this.empInfo=res.data;
           }
         })
      this.canRun = true;
     }.bind(this), 2000);
} 

函数节流的要点是，声明一个变量当标志位canRun ，记录当前代码是否在执行。
如果canRun = true,表示事件空闲，可以使用。
将canRun=false表示事件正在执行，2s之后再触发请求。