如何实现防抖节流？

一、实现防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

比如说一个倒计时按钮，倒计时10秒，过了两秒，有人再次触发按钮，又要重新计时，再等10秒。

实现防抖思路：通过闭包维护一个变量，此变量代表是否已经开始计时，如果已经开始计时则清空之前计时器，重新计时。

    <script>
        // 首先闭包里面要有一个变量，这个变量是个计时器，
        // 我们要判断这个计时器是否已经计时了，如果已经
        // 计时了我们就把原先的清空掉
        // 不管有没有计时器，我们设置一个计时器，然后把函数和时间传进来
        // 传进来的函数有参数，还有this指向，用arguments和apply
            function debounce(fn, time) {
        let timer = null;
        return function() {
          let args = arguments;
          let context = this;
          if (timer) {
            clearTimeout(timer);
            timer = null;
          }
          timer = setTimeout(function() {
            fn.apply(context, args);
          }, time);
        };
      }
      function test(num) {
        console.log(num);
        console.log(this);
      }
      let newFn = debounce(test, 1000);
      window.onscroll = function() {
        newFn(123);
      };
    </script>

// 这个案例就是展示搜索框内容提示，为避免不必要的请求，设置一个定时器，
// 800 毫秒向服务器发送一次请求，如果期间文本框值发生变化,则清空计时器，不发送请求。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>搜索框输入文字自动提示</title>
    <link
      rel="stylesheet"
      href="//www.greatytc.com/assets/bootstrap/dist/css/bootstrap.min.css"
    />
    <style type="text/css">
      .container {
        padding-top: 150px;
      }

      .list-group {
        display: none;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="form-group">
        <input
          type="text"
          class="form-control"
          placeholder="请输入搜索关键字"
          id="search"
        />
        <ul class="list-group" id="list-box"></ul>
      </div>
    </div>
    <script src="/js/ajax.js"></script>
    <script src="/js/template-web.js"></script>
    <script type="text/html" id="tpl">
      {{each data}}
      <li class="list-group-item">{{$value}}</li>
      {{/each}}
    </script>
    <script>
      // 获取搜索框
      var searchInp = document.getElementById("search");
      // 获取提示文字的存放容器
      var listBox = document.getElementById("list-box");
      // 存储定时器的变量
      var timer = null;
      searchInp.oninput = function() {
        clearTimeout(timer);
        var key = this.value;
        if (key.trim().length == 0) {
          listBox.style.display = "none";
          return;
        }
        timer = setTimeout(function() {
          ajax({
            type: "get",
            url: "http://localhost:3000/searchAutoPrompt",
            data: {
              key: key
            },
            success: function(data) {
              var html = template("tpl", { data: data });
              console.log(data);

              listBox.innerHTML = html;
              listBox.style.display = "block";
            }
          });
        }, 600);
      };
    </script>
  </body>
</html>

二、实现节流：在一段时间内，只能有一次触发事件的回调函数执行，如果在同一个单位时间内某事件被多次触发，只能有一次生效。

例如发送验证码倒计时按钮，必须等够多少秒后才可以再次发送。

实现思路：通过闭包维护一个变量，次变量代表是否允许执行函数，如果允许则执行函数并且把该变量修改为不允许，并使用定时器在规定时间后恢复变量。

     <script>
      function throttle(fn, time) {
        let canRun = true; //是否允许fn 函数被执行
        return function() {

          if (canRun) {
            fn.apply(this, arguments);
            canRun = false;
            setTimeout(function() {
              canRun = true;
            }, time);
          }
        };
      }
      function test(num) {
        console.log(num);
        console.log(this.age);
      }
      let obj = {
        age: 18
      };
      let newFn = throttle(test, 2000);
      obj.newFn = newFn;
      window.onscroll = function() {
        obj.newFn("123");
      };
    </script>

如何实现防抖节流？

推荐阅读更多精彩内容