防抖和节流区别

最新推荐文章于 2024-07-10 19:58:24 发布
最新推荐文章于 2024-07-10 19:58:24 发布
阅读量251 收藏
点赞数 1
分类专栏： js 文章标签： javascript 前端 html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_69375569/article/details/132250788
版权
本文介绍了防抖和节流两种技术，用于优化高频率事件处理，如浏览器的resize和scroll事件。防抖在单位时间内仅执行最后一次，而节流则限制在设定时间内只执行一次。通过实例代码演示了它们在搜索框搜索、文本编辑、快速点击等场景的应用。
摘要由CSDN通过智能技术生成

防抖和节流

一、防抖和节流是什么

       本质上是优化高频率执行代码的一种手段,

       如：浏览器的 resize、scroll、keypress、mousemove 等事件在触发时，会不断地调用绑定在事件上的回调函数，极大地浪费资源，降低前端性能

       为了优化体验，需要对这类事件进行调用次数的限制，对此我们就可以采用throttle（防抖）和debounce（节流）的方式来减少调用频率

防抖：单位时间内，频繁触发事件，只执行最后一次

代码思路是利用定时器，每次触发先清掉以前的定时器 (从新开始)

应用场景

搜索框搜索输入

文本编辑器实时保存

实现简单的防抖代码如下：

节流: 单位时间内，频繁触发事件，只执行一次

就是指连续触发事件但是在设定的一段时间内中 只执行一次函数例如: 设定1000毫秒执行，那你在1000毫秒触发在多次，也只在1000毫秒后执行一次

记忆方法: 不要打断我

实现简单的节流代码如下：

应用场景

高频事件 例如 快速点击、鼠标滑动、resize 事件、scroll 事件

下拉加载

视频播放记录时间等

Lemom199
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
防抖和节流的区别和举例（简要说明、形象比喻、容易理解）
南北极之间
05-21 754
总的来说，防抖和节流都是为了减少事件触发频率，优化性能。在一定时间内，多次触发同一个事件，但只有在最后一次触发后，经过指定的等待时间，才会执行相应的事件处理函数。在一定时间内，多次触发同一个事件，但只会执行一次事件处理函数，无论这个事件被触发了多少次。在前端开发技术中，防抖（Debounce）和节流（Throttle）是两种常用的性能优化技术，主要用于处理高频事件触发，如用户的点击、滚动、输入等操作。在事件被频繁触发的情况下，防抖可以保证一定时间内只触发一次回调，并且是在事件触发结束后的一定时间内触发。
节流（throttling）和防抖（debouncing）
qq_41546003的博客
10-22 7727
节流（throttling）和防抖（debouncing）是在处理用户输入和其他事件时常用的两种性能优化技巧。它们的主要目的是控制事件触发的频率，以避免不必要的重复操作，减轻系统负担，提高用户体验。
防抖节流打包
l_tsov的博客
12-11 680
防抖 function debounce(fn,delay){ let timer = null //借助闭包 return function() { if(timer){ clearTimeout(timer) } timer = setTimeout(fn,delay) // 简化写法 } } // 然后是旧代码 function showTop () { var scrollTop = d.
【鸿蒙实战开发】JS中节流和防抖
最新发布
HarmonyOS_002的博客
07-10 1125
这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
防抖和节流
baidu_39009276的博客
03-28 5万+
防抖和节流
彻底理清防抖和节流（前端性能优化）
夏日漱石的博客
04-28 6124
前端有很多性能优化的方式，面对用户与网页的频繁交互，如输入框打字、按钮点击、滚动事件等，我们如何确保应用的响应既迅速又高效？ 大家应该都简单了解防抖和节流本质上就是优化这种高频率执行代码的手段，那么他们之间有什么区别呢？应该如何正确根据具体的场景来选择使用呢？
防抖(debounce) 和 节流(throttling)
热门推荐
独碟的博客
07-05 14万+
防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。 在给DOM绑定事件时，有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。 在实时检查输入时，如果我们绑定onkeyup事件发请求去...
JS函数节流和防抖之间的区分和实现详解
10-17
JavaScript中的函数节流（Throttle）和防抖（Debounce）是优化性能的重要技术，尤其在处理频繁触发的事件上，如滚动、输入等。两者虽然都能限制函数的执行频率，但工作原理和应用场景有所不同。 **节流（Throttle）...
vue中使用防抖和节流
01-24
防抖(debounce)和节流(throttle)是两种常用的性能优化策略，它们可以帮助我们控制函数的执行频率，减少不必要的计算，从而提高应用的响应速度和效率。本文将详细介绍在Vue项目中如何实现和使用防抖与节流。 ### 1. ...
Vue的click事件防抖和节流处理详解
10-16
在实际的Vue项目中，我们可以将防抖和节流的代码封装成一个mixin，或者利用现成的Vue插件，例如lodash的debounce和throttle方法，来简化代码和提高开发效率。 最后，防抖和节流技术虽然能够解决频繁操作的问题，但...
Vue 中使用lodash对事件进行防抖和节流操作
10-15
防抖(debounce)和节流(throttle)的主要区别在于它们处理事件的方式。防抖技术确保在事件触发后的特定时间内，如果再次发生相同的事件，只有最后一次事件会被处理。而节流技术则是在固定的时间间隔内，无论事件触发...
防抖和节流是什么，区别以及如何实现？
weixin_48673083的博客
06-23 1780
防抖和节流基本实现和思路
防抖和节流（详细） 使用场景和区别
留着鼻涕敲代码
10-22 3万+
1.防抖 （多次触发 只执行最后一次） 作用： 高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间 防抖类似于英雄联盟回城6秒，如果回城中被打断，再次回城需要再等6秒 实现代码： <body> <input type="text" id="inp"> <script> // 1.封装防抖函数 function debounce(fn, time) {
什么是节流和防抖？有什么区别？如何实现？
m0_69892739的博客
12-27 1983
都设置时间频率为500ms，在2秒时间内，频繁触发函数，节流，每隔 500ms 就执行一次。防抖，则不管调动多少次方法，在2s后，只会执行一次。n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。n 秒内只运行一次，若在 n 秒内重复触发，只有一次执行。（防抖在连续的事件，只需触发一次回调）（节流在间隔一段时间执行一次回调）
JS的节流与防抖的目的，区别以及实现方式 （关注收藏，持续更新）
王春燕的博客
04-20 7849
一、节流和防抖的目的： 都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，防止在短时间内频繁触发同一事件而出现延迟，假死或卡顿的现象 二、节流和防抖的区别： 防抖：如果不断在delay之前重新触发，那么定时器会不断重新计时，最终会在最后一次完后才执行，对于需要实时响应的，应该用节流。 节流：目前有一事件A设置了定时器，那么在delay之前触发，都只会触发一次 三、节流和防抖的详解 防抖 debounce（设置1分钟只会执行一次，如果1分钟内又多次触发，会从再次触发开
防抖和节流区别使用场景
05-17
防抖和节流都是前端开发中常用的性能优化方式，它们的作用都是减少事件的触发次数，提升页面的响应速度和性能，但它们的实现方式和使用场景有所不同。 防抖：指在一定时间内，事件处理函数只执行一次，如果在这段...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值