19、节流和防抖的区别以及应用场景的理解

这篇具有很好参考价值的文章主要介绍了19、节流和防抖的区别以及应用场景的理解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

节流和防抖

  • 节流和防抖两者有什么区别?
  • 节流和防抖分别用于什么场景?

节流(throttle)和防抖(debounce)是两种常用的浏览器事件处理方法。

相同点:

  1. 都是为了减少事件触发频率,优化性能。

不同点:

  1. 节流是指在一段时间内最多触发一次事件,节流算法会在特定的时间间隔内判断是否触发事件;
  2. 防抖是指在一段时间内只要有事件触发,就重新计算时间,直到这段时间内没有事件触发,才真正的执行事件;
  3. 节流适用于持续的触发,防抖适用于短时间内的大量触发。

防抖(debounce)

  防抖是一种浏览器事件处理方式,通俗地说,它是在短时间内大量触发事件时,只在最后一次事件触发结束后才真正的执行事件的过程。

通俗的说:防抖,防止抖动“你先抖动着,啥时候停了,再执行下一步”

防抖节流,前端100问,前端,javascript,节流,防抖

举个例子,当用户快速输入搜索关键字时,浏览器每隔500ms才会执行事件处理函数。这意味着,当用户快速输入的过程中,浏览器会不断重新计算执行事件的时间,直到500ms内用户停止输入,才真正的执行事件处理函数。

这样做的好处是,防止大量不必要的事件触发,对性能有很好的优化作用。

代码实现(code)

function debounce(fn, delay = 200) {
    let timer = 0
    
    return function () {
        if (timer) clearTimeout(timer)
        
        timer = setTimeout (() => {
            fn.apply(this,arguments) // 透传this 和参数
            timer = 0
        },delay)
    }
}

案例测试(test)

监测输入框,用户快速输入内容过程中,防抖函数的处理效果。

防抖之前:

<body>
  搜索:<input id="input1"/>
  <script>
    function debounce(fn, delay = 200) {
    let timer = 0
    
    return function () {
        if (timer) clearTimeout(timer)
        
        timer = setTimeout (() => {
            fn.apply(this,arguments) // 透传this 和参数
            timer = 0
        },delay)
    }
}

const input1 = document.getElementById('input1')

input1.addEventListener('keyup',(e) => {
  console.log(e.target.value)
})
  </script>
</body> 

效果:

防抖节流,前端100问,前端,javascript,节流,防抖


防抖之后:

<body>
  搜索:<input id="input1"/>
  <script>
    function debounce(fn, delay = 200) {
    let timer = 0
    
    return function () {
        if (timer) clearTimeout(timer)
        
        timer = setTimeout (() => {
            fn.apply(this,arguments) // 透传this 和参数
            timer = 0
        },delay)
    }
}

const input1 = document.getElementById('input1')

input1.addEventListener('keyup',debounce((e) => {
  console.log(e.target.value)
},300))
  </script>
</body>

效果:

防抖节流,前端100问,前端,javascript,节流,防抖


对比结果:防抖过滤了许多不必要的事件触发,只在用户输入结束300ms后打印了输入框的结果,减少了浏览器的性能消耗。


节流(throttle)

  节流是一种浏览器事件处理方式,通俗地说,它是限制事件在特定时间内最多触发一次的过程。

  节流,节省交互沟通,流,不一定指流量

通俗的讲:“别急,一个一个来,按时间节奏来,插队者无效”

防抖节流,前端100问,前端,javascript,节流,防抖

举个例子,当用户持续滚动鼠标滚轮时,浏览器每隔100ms触发一次事件处理函数。这意味着,不管用户滚动的速度如何,在每100ms的时间内最多只会触发一次事件处理函数。

这样做的好处是,防止事件过于频繁的触发,对性能有很好的优化作用。

代码实现(code)

function throttle(fn, delay = 100) {
    let timer = 0 
    return function () {
		if (timer) return
        
        timer = setTimeout(()=> {

            fn.apply(this,arguments) // 透传this 和参数
        	timer = 0
        },delay)
    }
}

案例测试(test)

监测拖拽工程中,元素的位置信息,节流函数处理的效果。

节流之前:

<body>

  <div id="drag" draggable="true" style="width: 100px ;height: 50px; background-color: brown; padding: 10px;">
    可拖拽
  </div>

  <script>
    function throttle (fn, delay = 100) {
      let timer = 0
      return function () {
        if (timer) return

        timer = setTimeout(() => {

          fn.apply(this, arguments) // 透传this 和参数
          timer = 0
        }, delay)
      }
    }

    const div1 = document.getElementById('drag')

    div1.addEventListener('drag',(e) => {
      console.log('拖拽的位置:',e.pageX,e.pageY)
    })
  </script>
</body>

效果:

防抖节流,前端100问,前端,javascript,节流,防抖


节流之后:

<body>

  <div id="drag" draggable="true" style="width: 100px ;height: 50px; background-color: brown; padding: 10px;">
    可拖拽
  </div>

  <script>
    function throttle (fn, delay = 100) {
      let timer = 0
      return function () {
        if (timer) return

        timer = setTimeout(() => {

          fn.apply(this, arguments) // 透传this 和参数
          timer = 0
        }, delay)
      }
    }

    const div1 = document.getElementById('drag')
    
    div1.addEventListener('drag',throttle((e) => {
      console.log('拖拽的位置:',e.pageX,e.pageY)
    },300))
      
  </script>
</body>

效果:

防抖节流,前端100问,前端,javascript,节流,防抖


对比结果:节流防止了频繁的事件触发,只在用户拖拽的过程中,每隔300ms打印了元素的位置信息,减少了浏览器的性能消耗。


总结

  • 节流:限制执行频率,有节奏的执行

  • 防抖:限制执行次数,多次密集触发只执行一次

  • 节流关注“过程”,防抖关注“结果”

  • 实际工作还是使用 lodash 工具库较好文章来源地址https://www.toymoban.com/news/detail-771479.html

到了这里,关于19、节流和防抖的区别以及应用场景的理解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 防抖和节流有什么区别?

    一、理解防抖和节流 防抖: 在单位时间内频繁触发事件,只有最后一次生效 比如:在游戏回城的时候被打断,再次点回城就会重新计时,最终只有没被打断的最后一次,才能成功回城,就是防抖 节流: 在单位时间内频繁触发事件,只生效一次(也就是只有第一次生效) 比

    2024年02月04日
    浏览(36)
  • 防抖和节流 含义及区别图文详解秒懂

    防抖和节流都是为解决短时间内频繁触发某个功能函数而导致的性能问题。比如,触发频率过高而导致响应速度跟不上,以致出现延迟,假死或卡顿的现象。  图解:一件事情,计划5s以后触发,结果中途意外触发了,那么就重新从0开始5秒的计时,这就导致本身计划的事情就

    2024年02月06日
    浏览(34)
  • 微信小程序——swiper抖动问题解决以及节流、防抖

    目录 一、引出 二、防抖函数 1.为什么需要防止抖动的原因 2.函数防止抖动的原理 3.防抖动代码函数实现 4.在小程序当中使用的防抖函数 三、节流函数 1.为什么需要节流的原因 2.函数节流的原理 3.节流函数代码的实现 四、区别与使用的场景 1.什么时候会用到节流函数和防抖函

    2024年02月04日
    浏览(85)
  • WPF 与 Winform 的区别以及应用场景

    一、WPF框架以及应用场景 ​ WPF框架 ​ 1.1、WPF与WinForm ​ WPF :https://github.com/dotnet/wpf ​ SilverLight : Web富客户端 ​ 1.2、异/同点 ​ 共同点:最终的输出结果都是客户端应用,实现 人机交互。 ​ 异同点: ​ 界面渲染不一样 ​ 业务逻辑控制不一样(界面设计,色彩、尺寸比

    2024年02月09日
    浏览(37)
  • lucene、solr、es的区别以及应用场景

    Lucene、Solr 和 Elasticsearch(ES) 都是基于 Lucene 引擎的搜索引擎,它们之间有相似之处,但也有一些不同之处。 Lucene 是一个低级别的搜索引擎库,它提供了一种用于创建和维护全文索引的 API,以及一些搜索和排序算法。Lucene 主要用于构建自定义搜索引擎,例如在 Java 应用程序中

    2024年02月15日
    浏览(36)
  • Vue 3 中的极致防抖/节流(含常见方式防抖/节流)

    各位朋友你们好呀。今天是立春,明天就是正月十五元宵节了,这种立春 + 元宵相隔的时候,可是很难遇到的,百年中就只有几次。在这提前祝大家元宵快乐。 今天给大家带来的是 Vue 3 中的极致防抖/节流(含常见方式防抖/节流) 这篇文章,文章中不仅会讲述原来使用的防

    2024年02月01日
    浏览(43)
  • Cookie、Session和Token三者区别以及各自应用场景

    存储位置:Session和Cookie分别存储在服务器端和客户端,而Token则是在客户端和服务器端之间传递的。 安全性:Session相对于Cookie来说更安全,因为Session存储在服务器端,不容易被恶意攻击者获取。而Cookie存储在客户端,存在被拦截或篡改的风险。Token则通常用于安全认证和授

    2024年02月09日
    浏览(44)
  • 详细分析Redis和Memcached的特点、应用场景以及区别

    Redis和Memcached是两种常用的内存缓存系统,用于提高数据访问的速度和性能。 Redis(Remote Dictionary Server)是一个开源的高性能键值存储系统(C语言编写),它支持多种数据结构,包括字符串、哈希表、列表、集合等,并提供了丰富的操作命令。 Redis的特点: 1. 数据持久化:

    2024年02月07日
    浏览(41)
  • 性能优化---节流与防抖

    1、什么是节流和防抖         防抖是指在事件被触发 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时。这可以使用在一些点击请求的事件上,避免因为用户的多次点击向后端发送多次请求。         节流是指规定一个单位时间,在这个单位时间内,只

    2024年04月17日
    浏览(37)
  • 前端优化 ----防抖 节流

    如果一个事件在短时间内连续触发,则只去执行最后一次。 控制频率 实现方式:每次触发事件时设置一个延迟调用方法,并且取消之前的延时调用方法 缺点:如果事件在规定的时间间隔内被不断的触发,则调用方法会被不断的延迟 使一个函数在固定时间内只执行一次。控制

    2024年02月04日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包