实现防抖和节流，原理介绍+应用场景

防抖和节流都是为了解决事件被频繁触发的问题

防抖(debounce)

原理:当持续触发事件时,在设定的时间内没有再次触发事件,则事件才会处理函数一次;如果在设定时间之前再次触发该事件,则重新开启定时器,执行最后一次触发事件

应用场景:

• scroll事件滚动
• 浏览器窗口的缩放resize事件
• 搜索框输入查询
• 表单验证
• 按钮提交

代码实例:

  <input type="text">
  <script>
    let inp = document.querySelector("input")
    inp.oninput = debounce(function () {
      console.log(this.value)
    }, 1000)
    function debounce(fn, delay) {
      let t = null
      return function () {
        if (t !== null) {
          clearTimeout(t)
        }
        t = setTimeout(() => {
          fn.call(this)
        }, delay)
      }
    }
  </script>

节流(throttle)

原理:在持续触发事件时,在一定时间内只调用一次事件函数,如果在设定时间内再次触发事件,则不执行,目的就是减少一段时间内的触发频率

应用场景:

• dom元素拖拽功能实现
• 计算鼠标移动距离
• 监听scroll事件滚动
• 搜索提交功能按钮

代码实例

 <style>
    body {
      height: 2000px
    }
  </style>

 <script>
    window.onscroll = throttle(function () {
      console.log("滚动")
    }, 500)
    function throttle(fn, delay) {
      let flag = true
      return function () {
        if (flag) {
          setTimeout(() => {
            fn.call(this)
            flag = true
          }, delay)
        }
        flag = false
      }
    }
  </script>