闭包节流和防抖

 <style>
      div {
        width: 200px;
        height: 200px;
        background-color: skyblue;
        margin: 50px auto;
      }
    </style>

<div></div>

防抖:

一、什么是防抖？

防抖阻止了事件的多次调用，规定时间内只会执行一次。

---

二、防抖解决了什么问题

假设一个用户高频点击一个按钮，点击按钮后会向后台发送请求，如果不使用防抖，就会发送许多重复的Ajax请求，造成服务器压力。使用防抖后，规定时间内，只会发送一次Ajax请求，可以有效地减缓服务器的压力。

---

三、实现防抖的基本代码

通过监听输入框的输入事件，通过定时器每隔一秒获取一次用户输入的内容，如果一秒内用户又进行了输入，清除上一次的定时器，重新计时一秒，计时结束后将用户输入的内容打印到控制台。

---

四、防抖的应用场景
想必大家平时都有逛购物网站的习惯，当我们在搜索框搜索某件商品时,只要输入关键字就会在搜索框下出现对应的联想列表。但是联想列表不是实时展示的，可以延迟500毫秒或者1秒，将用户输入的关键字通过Ajax请求提交给后台，当得到后台服务器响应后，再将联想列表展示给用户。这样的操作大大地减少了对服务器的请求压力，延迟适当的时间，也可以让用户有足够的时间将想要搜索的关键字写完整。

<script>
      function debounce(fn, delay) {
        var timer = null;
        return function () {
          if (timer) clearTimeout(timer);
          timer = setTimeout(fn, delay);
        };
      }

      let fn = debounce(function () {
        console.log("移进去了");
      }, 500);
      document.querySelector("div").onmouseenter = function () {
        fn();
      };
    </script>

节流：

---

一、应用场景
用户选择手机号和验证码登录的时候，往往需要填写手机号后，点击发送验证码来进行后续操作。那么发送验证码的动作应该有一个限制，不然用户一直点击按钮，不但会给用户带来经济损失，也会发送很不必要的请求给后台。

所以对用户点击发送验证码后的按钮，进行一个倒计时的防抖操作是必须的。

<script>
      function throttle(fn,delay){
        var timer = null
        return function(){
          if(timer) return
          timer = setTimeout(function(){
            fn()
            timer = null
          },delay)
        }
      }

      let fn = throttle(function(){
        console.log("已经走了")
      },200)
      document.querySelector("div").onmouseleave = function(){
        fn()
      }
    </script>