浅谈js节流、防抖应用和案例

一、节流：简单地说，就是限制一个动作在一段时间内只能执行一次

打个比方，好比我们打英雄联盟或者王者荣耀的时候，释放技能都有一段冷却时间，比如Q技能有5秒的冷却时间，那么我们在5秒钟的时间内只能释放一次Q技能。
一般使用场景：
scroll 事件，每隔一秒计算一次位置信息等
比如我们常见的谷歌搜索框的联想功能
监听浏览器的滚动加载事件
高频鼠标点击事件（也可做防抖）
拖拽动画

节流代码

这是比较完整的节流写法，其实节流有两种简单的写法（只用setTimeout（能保证），只用time管理），这里结合了两种–保证第一次输入会执行，最后一次输入时间不到也会最后执行一次

function throttle(fn,interval){
   
   //最开始的时间
   let beginTime = new Date()
   let settimeer
   return function(args){
   
       //每次调用的时候查询时间
       let nowTime = new Date()
       let remainTime = interval - (nowTime-beginTime)
       //当小于等于0 时说明间隔时间到了
       if(remainTime<=0){
   
          fn.call(this,args)
          beginTime = new Date()
       }else{
   
        //这个else保证最后一次也要调用 就是最后一次调用的时候没有在间隔时间内，但是也要调用
        clearTimeout(settimeer)
        settimeer = setTimeout(()=>{
   
            fn.call(this,args)
        },remainTime)
       }
   }
 }

二、防抖：简单地说，就是 当一个动作连续触发，只执行最后一次。

还是举一个英雄联盟中的例子，比如你按下了回城键，那么在8秒钟之后，就会执行回城事件，但如果你再次按下回城键，那么回城时间又将重新计时，需要在等8秒才会执行回城事件。
一般使用场景：
搜索框搜索，我们只需要用户输完之后，再发送请求
浏览器窗口大小变更，我们是不是可以等待变更完成之后再计算窗口大小，防止重复渲染
文本编辑器的实时保存，无任何操作之后等待延迟时间进行保存
比如某些应用的点赞功能，我们就需要点击之后立即生效，但是用户后续如果不停的点击我们就可以进行防抖操作
登录、发短信等按钮避免用户点击太快࿰