首页 > 其他分享 >实现防抖和节流,原理介绍+应用场景

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

时间:2022-09-05 10:48:42浏览次数:59  
标签:function 触发 防抖 场景 节流 delay flag 事件

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

防抖(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>

 

标签:function,触发,防抖,场景,节流,delay,flag,事件
From: https://www.cnblogs.com/qianduan-Wu/p/16657236.html

相关文章