默认文件1631424598495.png

JavaScript防抖与节流

为什么要有防抖与节流

如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕，此时我们可以采用 debounce（防抖）和 throttle（节流）的方式来减少调用频率，同时又不影响实际效果

一、防抖

当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时

如下：输入事件在输入时，2000毫秒之内不触发事件才会输出，而且2000毫秒之内再次出发 input 事件就会重新计时

<div>
  <input class="inp" type="text" />
</div>
<script>
  let input = document.querySelector('.inp')
  let timer = null

  // 防抖
  input.addEventListener('input', function () {
    // console.log(input.value)
    clearTimeout(timer)
    timer = setTimeout(function () {
      console.log(input.value)
    }, 2000)
  })
</script>

效果在这里插入图片描述

二、节流

当持续触发事件时，保证一定时间段内只调用一次事件处理函数节流通俗解释就比如我们水龙头放水，阀门一打开，水哗哗的往下流，秉着勤俭节约的优良传统美德，我们要把水龙头关小点，最好是如我们心意按照一定规律在某个时间间隔内一滴一滴的往下滴

如下：鼠标移动事件，在100毫秒之内触发一次定时器函数，不会无限次触发

<div>
  <h1 class="z">坐标</h1>
</div>
<script>
  let z = document.querySelector('.z')
  let timer = null
  document.addEventListener('mousemove', function (e) {
    if (timer !== null) return
    timer = setTimeout(function () {
      console.log(e.clientX, e.clientY)
      z.innerHTML = '坐标' + '(' + e.clientX + ',' + e.clientY + ')'
      timer = null
    }, 100)
  })
</script>

效果在这里插入图片描述