函数防抖and函数节流

函数防抖

函数防抖，这里的抖动就是执行的意思，而一般的抖动都是持续的，多次的。

假设函数持续多次执行，我们希望让它冷静下来再执行。

也就是当持续触发事件的时候，函数是完全不执行的，等最后一次触发结束的一段时间之后，再去执行。

函数防抖的场景

• 登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖

• 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖

• 文本编辑器实时保存，当无任何更改操作一秒后进行保存

函数防抖的实现

function debounce(func,delay){
           let time;
           return function(){
               clearTimeout(time);
              time =  setTimeout(()=>{
                func.apply(this,arguments);
              },delay)
           }
       }
       box.onmousemove = debounce(function(e){
           box.innerHTML = `${e.clientX},${e.clientY}`
       },1000)

---

函数节流

节流的意思是让函数有节制地执行，而不是毫无节制的触发一次就执行一次。

什么叫有节制呢？就是在一段时间内，只执行一次。

函数节流的场景

• scroll 事件，每隔一秒计算一次位置信息等

• 浏览器播放事件，每个一秒计算一次进度信息等
input 框实时搜索并发送请求展示下拉列表，没隔一秒发送一次请求 (也可做防抖)

函数节流的实现

<script type="text/javascript">
        const box = document.getElementById("box");
       
       function throttle(func,delay){
           let run = true;
              return function(){
                  if(!run){ //如果开关关了，直接退出
                      return;
                  }
                  run = false;//持续触发的话，run一直是false，就会提供留在上面的判断中
                
                  setTimeout(()=>{
                    func.apply(this,arguments);
                    run = true//定时器到时间之后，会把开关打开，我们的函数就会被执行
                },delay)
              }
       }
 
        box.onmousemove = throttle(function(e){
            box.innerHTML = `${e.clientX},${e.clientY}`
        },1000)
 
     </script>