js 节流与防抖使用场景：不立即执行。监听滚动条事件在一定时间(1000ms)内,如果再次触发，就先取消计时器，再重新计

防抖

使用场景：不立即执行。监听滚动条事件在一定时间(1000ms)内,如果再次触发，就先取消计时器，再重新计时；没有再次触发，就执行

节流

使用场景：使用flag标志上次触发是否完成

其他使用场景

input输入框实时搜索

代码

以滚动条事件为例

<!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>
</head>
<style type="text/css">
.scoll{
  width:100%;
  height: 120vh;
}
</style>
<body>
  <div class="scoll">
    vuvuvuuvuvu
  </div>
  <script type="text/javascript">
    // 防抖函数
    function debounce(fn, delay){
      let timer = null;
      return function(){
        if(timer){
          clearTimeout(timer)
        }
        timer = setTimeout(fn, delay)
      }
    }
    // 节流函数
    function throttle(fn, delay){
      let valid = true
      return function(){
        if(!valid){
          return false
        }
        valid = false
        setTimeout(() => {
          fn();
          valid = true
        }, delay)
      }
    }
    function showTop(){
      // 谷歌：document.body.scrollTop ie,火狐：document.documentElement.scrollTop
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      console.log('滚动条位置：' + scrollTop);
    }
    // 滚动条事件 停止滚动一秒以后才会打印出位置
    window.onscroll = throttle(showTop, 1000)
  </script>
</body>
</html>