冬天来了记得“防抖“,还有节流-CSDN博客

本文链接：https://blog.csdn.net/wzfnba/article/details/128243715

为什么

我们在对浏览器窗口进行resize,scroll,输入框内容校验等操作的时候,如果事件处理函数的调用没有限制,这样会加重浏览器的负担,导致用户的体验感也非常不好,所以就需要我们对事件处理函数的抵用加以限制,就可以使用debounce(防抖)和throttle(节流)来处

1.防抖

概念:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才执行一次,如果在这个时间段内重新触发了函数,则重新计时

: 在盒子里面添加一个鼠标移动事件, 当鼠标移动时给盒子的数字加一, 如果我们不加一个定时器进行显示,只要鼠标轻微的移动里面的数字就会加一,会发现数字加的非常的快.所以添加debounce函数,在设置的2秒内没有进行鼠标的移动才输出数字

  <script>
    // 学习防抖
    const boxDom = document.querySelector('.box')

    let count = 1;

    function mousemove() {
      count++
      boxDom.innerHTML = count
    }

    function debounce(fn, time) {
      let timerId
      return function () {
        //下一次滑动开始 要先将之前的定时器清除
        clearTimeout(timerId)

        //定时器里面的函数需要2s之后才执行
        //如果2s 又滑动我们的鼠标 就会进入函数 首先清空上一次的定时器
        //只有当两次滑动的间隔大于2s 定时器里面的回调函数才会执行
        timerId = setTimeout(function () {
          fn()
        }, time)
      }

    }
    boxDom.addEventListener('mousemove', debounce(mousemove, 2000))
  </script>

3 节流

当持续触发事件时,保证一定时间段内只调用一次事件处理函数.如下代码所示:

持续触发事件时,并不立即执行函数,每隔1秒才执行一次

<script>
    function throttle(fun,deplay){
     const prev=Date.now()
     return function(){
      const context=this;
      const args=arguments
      const now=Date.now()
      if(now-prev>=deplay){
        fun.apply(context,args)
        prev=Date.now()
      }
     }
    }
    function handle(){
      console.log(Math.random());
      window.addEventListener('scroll',throttle(handle,1000))
    }
  </script>