防抖与节流

原因

在前端页面中，用户经常会持续不断地触发事件，例如scroll、resize、输入框内容匹配等，如果事件触发无限制，将会增加浏览器负担，影响用户体验。因此，我们可以通过防抖或节流的方式降低事件处理函数调用的频率。

防抖

原理：

当用户触发事件，浏览器会等待一定时间，再调用事件处理函数。如果在这个期间内用户又触发事件，则浏览器又重新等待一段时间。

应用场景：

输入框根据用户输入提示文本
用户注册时候的手机号验证和邮箱验证

函数实现：

   function debounce(func, time){
            let timer,
            return function(){
               var self = this;
               var argus = arguments;
               if(timer) { clearTimeout(timer); }                                                               
               timer = setTimeout(()=>func.apply(self, argus), time); 
              
   }

节流

原理：

当上一次事件处理函数执行完之后过了规定的时间间隔，才能进行下一次的事件处理函数调用

应用场景：

用户滚动浏览器页面

函数实现：

时间戳方式----第一次触发会立即执行：

   function throttle(func, time){
            let pre = Date.now(),
            return function(){
               var self = this;
               var args = arguments;
               let now = Date.now();
               if(now-pre>=time) { 
                    func.apply(self, args);
                    pre = Date.now();
               }
   }

定时器方式----第一次触发等待time秒后执行：

   function throttle(func, time){
            let timer,
            return function(){
               var self = this;
               var args = arguments;
               if(!timer) { 
                   timer = setTimeout(()=>{
                        func.apply(self, args);
                        timer = null;
                    }, time); 
               }
   }