JS防抖与节流

前言

        JS中防抖与节流算是性能优化的知识，在编写代码中不注重防抖与节流的方面，会造成资源浪费，严重会造成浏览器卡死，崩溃等影响。防抖与节流都是为了减轻浏览器的压力，但又有些区别。

        防抖是让一个函数在一段时间间隔内没有调用，才开始执行被调用。

        节流是让一个函数无法在很短的时间间隔内被多次调用。意思就是一个函数被调用了后，得让它歇一下，等它歇完了（等一定的时间间隔之后），才能被再次调用。

---

一、防抖

        像我们平常在输入框输入时，每输入一个字符，浏览器都会向后台发送一次请求，会造成资源的浪费。

  <input type="text">
  <script>
    //获取输入框节点
    const input = document.querySelector('input');

    input.oninput = debounce(function () {
      //业务代码
      console.log(this.value);
    }, 500);

    // 封装防抖函数    闭包
    //业务代码和规定时间设置为参数
    function debounce(fn, delay) {
      //设置timer为空
      let timer = null;
      return function () {
        //如果timer中有值，则把它清空
        //就是在自己设定的时间内输入，把之前等待的时间清空
        //重新开始计时
        if (timer) {
          clearTimeout(timer);
        }
        //在规定的时间内没有输入值，执行业务代码
        timer = setTimeout(() => {
          // 业务代码,改变内部this指向
          fn.call(this);
        }, delay);
      }
    }
  </script>

         设置防抖只有最后一次才会发送请求。

        防抖的时间可以自己设置，如果开发完产品的对象是对计算机熟悉，打字比较快的人，设置的时间可以短一些，如果是打字比较慢的人，设置时间可以长一些，根据实际情况设置。

二、节流

        比如一个网页特别长，我们在下划的时候，划一下滚轮可能会触发几百下，如果这几百次请求都发送，浏览器可能会卡死，浪费资源。前端发送了这么多请求，还都一样，后台的人就不会很高兴。

 <script>
    // 节流：控制高频事件的触发次数
    window.onscroll = throttle(function () {
      console.log('页面滚动');
    }, 500);

    function throttle(fn, delay) {
      //设置一个Boolean类型的变量
      let flag = true;
      return function () {
        if (flag) {
          //经过一定的时间 执行业务代码，并将 flag = true
          //上面的条件判断，只有 flag = true 才能执行业务代码
          setTimeout(() => {
            // 业务代码,改变内部this指向
            fn.call(this);
            flag = true;
          }, delay);
        }
        //规定的时间没到  则 flag = false 就不能执行代码
        flag = false;
      }
    }
  </script>

        设置每500毫秒发送一次请求，明显发送的就少了。节约了资源，并促进了人员之间的和睦。

---

总结

        总之，防抖和节流都是为了防止资源浪费，降低浏览器发生卡死，崩溃的可能性，减轻浏览器的压力。