前端面试常见——节流

节流

什么是节流？
高频事件触发，但在 n 秒内只会执行一次，
所以节流会稀释函数的执行频率。

代码附上

<!-- 第一种方法 -->
   <script>
    function coloring() {
      let r = Math.floor(Math.random()*255);
      let g = Math.floor(Math.random()*255);
      let b = Math.floor(Math.random()*255);
      document.body.style.background = `rgb(${r},${g},${b})`;
    }

    function throttle(func,delay) {
      let timer;
      return function() {
        let that = this;
        let args = arguments;
        if (timer) {
          return;
        }
        timer = setTimeout(()=>{
           func.apply(that,args);
           timer = null;
        },delay)
      }
    }

    window.addEventListener('resize',throttle(coloring,2000));
  </script>

  <!-- 第二种 -->
  <!-- <script>
    function coloring() {
      let r = Math.floor(Math.random()*255);
      let g = Math.floor(Math.random()*255);
      let b = Math.floor(Math.random()*255);
      document.body.style.background = `rgb(${r},${g},${b})`;
    }

    function throttle(func,delay) {
      let pro = 0;
      return function() {
        let now = new Date();
        let that = this;
        let args = arguments;
        if (now - pro > delay) {
          func.apply(that,args)
          pro = now;
        }
      }
    }

    window.addEventListener('resize',throttle(coloring,2000));
  </script> -->