函数节流

浏览器中DOM操作比起非DOM交互需要更多的内存和CPU时间,比如输入框的oninput、keyup、onresize、scroll等事件。其高频率的触发事件可能会让浏览器崩溃，为了解决这个问题，可以使用定时器对该函数进行节流。

基础形式:

var processor = {
   timeoutId : null,
   //实际进行处理的方式
   performProcessing: function(){
       //实际执行的代码
    },
   process: function (){
      clearTimeout(this.timeoutId);
      this.timeoutId = setTimeout(()=>{
         this.performProcessing()
      },1000);
   }
}
//尝试开始执行
processor.process();

• 上面processor.process()方法就算被频繁的调用，performProcessing()也只会每过1S的执行一次。
• 只要代码是周期性频繁执行的，应该使用节流来限制。

简化模式：

function throttle(fn, context){
    clearTimeout(fn.timeoutId);
    fn.timeoutId = setTimeout(()=>{
       fn.call(context)
     },1000)
}

• 简化模式的throttle()接收两个参数：context（要执行的方法），fn（执行的作用域）