防抖的作用是什么？请实现一个防抖函数

[guyuezhai]

防抖函数的作用

控制函数在一定时间内执行的次数，防抖意味着N秒内函数只会执行一次， 如果N秒内再次触发，则重新计算延迟时间

[guyuezhai]

1. 事件第一次触发时，timeout 是null，调用later()，若immediate为true，立即调用 fn.apply(this,params)；如果immediate为false 则等到设置时间time后调用 fn.apply(this,args)

2. 事件第二次触发时，如果timeout已经重置为null（即 setTimeout的倒计时结束）那么流程与第一次触发一样，若timeout不为null（即setTimeout的倒计时未结束），那么清空定时器，重新计时。

   function debounce(fn,time,immediate=true){
   let timeout,result;
   const later=(context,args)=>setTimeout(() => {
       timeout=null;
       if(!immediate){
           result = fn.apply(context,args)
           context=args=null
       }
   }, time);
   let debounced=function(...params){
       if(!timeout){
           timeout=later(this,params)
           if(immediate){
               result=fn.apply(this,params)
           }
       }else{
           clearTimeout(timeout)
           timeout=later(this,params)
       }
       return result
   }
   debounced.cancel=function(){
       clearTimeout(timeout)
       timeout=null
   }
   return debounced
   }

   常用场景

3. 搜索框的输入查询，如果用户不停的输入，没有必要每次都去请求接口，等到用户停止输入的时候，再调用，设置一个合适的时间间隔，有效的减轻服务端的压力

4. 表单验证

5. 按钮提交事件

6. 浏览器窗口缩放，resize事件