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>
复制代码

效果