js防抖demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>防抖</title>
  <style>
    body {
      margin: 0;
    }
    .scroll-wrapper {
      width: 240px;
      height: 300px;
      overflow-y: scroll;
      -webkit-overflow-scrolling: touch;
    }
    .content {
      width: 100%;
      height: 5000px;
      background: linear-gradient(to bottom, #ff5454, #ccff65, #4dffaf, #507aff, #ef4bff);
    }
    p {
      margin: 10px 0;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <p>上下滑动渐变色块，查看下方打印结果</p>
  <p>提示：滑动后停1秒以上</p>
  <div class="scroll-wrapper" id="scroll-wrapper">
    <div class="content"></div>
  </div>
  <div id="result"></div>
  <script>
    function debounce (fn, delay) {
      let timer = null
      // 闭包
      return () => {
        // 如果当前正处在某个计时过程中，那么就清除此次计时开始下一次计时，
        // 否则不清除，直接开始下一次计时，计时满delay毫秒后才会触发fn函数。
        if (timer) {
          clearTimeout(timer)
        }
        // 开始下一次计时
        timer = setTimeout(fn, delay)
      }
    }
    function handleScroll () {
      let result = document.getElementById('result')
      let p = document.createElement('p')
      p.innerText = '滑动后一秒钟内不再滑动我就执行一次'
      result.append(p)
    }
    let wrapper = document.getElementById('scroll-wrapper')
    wrapper.addEventListener('scroll', debounce(handleScroll, 1000))
  </script>
</body>
</html>
@debounce.html
代码：

效果：
