阅读 280

JavaScript防抖与节流

默认文件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>
复制代码

效果 在这里插入图片描述

文章分类
前端
文章标签