防抖与节流

最新推荐文章于 2022-12-14 22:53:05 发布

谢小虫虫

最新推荐文章于 2022-12-14 22:53:05 发布

阅读量244

点赞数

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_40434213/article/details/115429269

版权

本文探讨了JavaScript中的防抖与节流技术，这两种方法用于优化频繁执行的事件处理，减轻浏览器负担。防抖通过在最后一次操作后才执行函数，而节流则确保一定时间内只执行一次。举例来说，在鼠标移动事件中，防抖确保鼠标静止1秒后才打印，而节流则保证每一秒内仅打印一次，即使鼠标持续移动。这两个技巧在处理如滚动、输入等高频率事件时特别有用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

防抖与节流

最近在看面试题，发现对防抖与节流的概念一直有些模糊，今天研究了一下，弄懂了两者间的区别，记录一下

防抖与节流的作用都是用于控制短时间内大量操作，让浏览器不会因为短时间太过频繁的执行导致页面卡顿

防抖与节流都是通过定时器实现的
防抖效果：1秒内，只要有新的任务触发，取消上一个任务，重新计时
节流效果：1秒内，当前任务未执行完毕，新触发的任务无效

防抖

防抖指的是当短时间出现大量要执行的重复任务时，当A任务准备开始执行时，B任务出现了，这时取消A任务的执行，直接执行B任务
在这里插入图片描述
用一个例子展示防抖效果：给页面绑定一个鼠标移动事件，一般情况下，鼠标移动事件触发极为频繁，此时若在事件中处理复杂的逻辑，容易导致浏览器卡死，使用防抖解决该问题效果如下

防抖前：
在页面上随便移动下鼠标,mousemove打印了1000多次，触发非常频繁

window.document.addEventListener('mousemove',()=>{
  console.log('mousemove')
})

在这里插入图片描述
防抖后：
只有当鼠标停止移动超过1秒钟后才打印mousemove，极大减少了浏览器的压力

//防抖函数，接收一个函数和定时器延迟触发的事件
function debounce(fn,time){
  let timer
  return function(){
    clearTimeout(timer) //当前若还有定时器未执行取消定时器
    timer = setTimeout(() => { 
      fn()
    },time)
  }
}

window.document.addEventListener('mousemove',debounce(()=>{
  console.log('mousemove')
},1000))

在这里插入图片描述

节流

节流的概念与防抖类似，区别是大量重复任务出现时，当前任务未执行完毕时，出现的任务取消
在这里插入图片描述

//节流函数，接收一个函数和定时器延迟触发的事件
function throttle(fn,time){
  let flag
  return function(){
    // 设置一个标志位，当标志位为true说明正在当前有任务正在执行
    if(flag === true) return
    flag = true
    setTimeout(() => { 
      fn()
      flag = false
    },time)
  }
}

window.document.addEventListener('mousemove',throttle(()=>{
  console.log('mousemove')
},1000))