节流

函数节流：是指一定时间内js方法只跑一次
应用场景：如resize,scroll在改变窗口和滚动的时候

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .wrap {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      overflow-y: scroll;
      margin-top: 50px;
    }

    .scroll {
      height: 500px;
    }
  </style>
</head>

<body>
  <div class="wrap" id="throttle">
    <div class="scroll">函数节流</div>
  </div>
</body>

</html>
<script>
  let isPass = true;
  let throttle = document.getElementById('throttle')
  throttle.onscroll = () => {
    if (!isPass) {
      return;
    }
    isPass = false;
    setTimeout(() => {
      // 这里执行函数
      console.log("函数节流")
      isPass = true
    }, 300);
  }
</script>

ps:需要注意的是执行的间隔时间是>=300ms。如果具体执行的方法是包含callback的，也可以将isPass=true这一步放到callback中。

防抖

函数防抖：是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次（点击后一次动作时候会将前一次的给清空掉）
应用场景：如resize,scroll在改变窗口和滚动的时候

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .wrap {
      width: 200px;
      height: 200px;
      border: 1px solid red;
      overflow-y: scroll;
      margin-top: 50px;
    }

    .scroll {
      height: 500px;
    }
  </style>
</head>

<body>
  <div class="wrap" id="debounce">
    <div class="scroll">函数防抖</div>
  </div>
</body>

</html>
<script>
  let timer = null;
  let debounce = document.getElementById('debounce')
  debounce.onscroll = () => {
    // 清除未执行的代码,重新执行动作
    clearTimeout(timer);
    timer = setTimeout(() => {
      //这里执行函数
      console.log('函数防抖')
    }, 300);
  }
</script>