防抖和截流

最新推荐文章于 2024-08-21 15:43:48 发布
最新推荐文章于 2024-08-21 15:43:48 发布
阅读量730 收藏
点赞数 1
分类专栏： react 文章标签： javascript 前端 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51545524/article/details/121791561
版权

监听滚动事件和用户输入框事件（要有频率限制，不然就会加重浏览器的负担）

防抖和截流处理可以减少调用事件的频率

防抖：多次执行变为一次执行

        在一秒内出发事件，执行过程中，又触发，就会清空上次的定时器，只执行这次的触发事件

防抖

　　search搜索联想，用户在不断输入值时，用防抖来节约请求资源。

　　window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

节流

　　鼠标不断点击触发，mousedown(单位时间内只触发一次)

　　监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

前端小妹
关注
专栏目录
防抖和节流的区别和举例（简要说明、形象比喻、容易理解）
南北极之间
05-21 900
总的来说，防抖和节流都是为了减少事件触发频率，优化性能。在一定时间内，多次触发同一个事件，但只有在最后一次触发后，经过指定的等待时间，才会执行相应的事件处理函数。在一定时间内，多次触发同一个事件，但只会执行一次事件处理函数，无论这个事件被触发了多少次。在前端开发技术中，防抖（Debounce）和节流（Throttle）是两种常用的性能优化技术，主要用于处理高频事件触发，如用户的点击、滚动、输入等操作。在事件被频繁触发的情况下，防抖可以保证一定时间内只触发一次回调，并且是在事件触发结束后的一定时间内触发。
截流 和 防抖
dlf_0610的博客
07-13 493
截流防抖函数经常用在频繁按钮操作，页面滚动触发，鼠标拖拽，输入查询等功能中。是为了在频繁操作中为了减少性能损耗的小技巧,这两个概念常用但是又容易混淆,下面简单的分析下防抖与截流的异同之处 防抖： 意味着防止抖动出现的误操作，也就是防止像抖动一样的频繁操作。所以在防抖函数里会有个时间限制，当函数在一次执行之后的这个时间限制范围内是不会再次发生的，再次触发的话又要等一个时间限制的时间，代码如下 // 防抖函数：调用后在一定的时间内函数不执行，过了限时执行， //在限时内再次调用会重新开启定时器 function
防抖截流
98猛虎的博客
04-28 428
截流 只有大于等于执行周期时才执行，周期内调用不执行。 function throttle(handler, wait){ var lastTime = 0 return function () { var nowTime = new Date().getTime() if(nowTime - lastTime > wait) { handler.apply(this, a...
节流和防抖的区别
最新发布
SR003的博客
08-21 657
节流：在规定时间内无论触发多少次，函数只执行一次。防抖：在规定时间内如果有多次触发，函数只会在最后一次触发后的延迟时间内执行。
防抖与截流
qq_43817972的博客
07-21 746
防抖的定义： 当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时。如下图，持续触发scroll事件时，并不执行handle函数，当1000毫秒内没有触发scroll事件时，才会延时触发scroll事件。 防抖debounce的代码 let count = 0; let button = document.ge...
防抖和截流超级详细讲解，易懂
super帅的博客
04-05 2920
防抖函数： 在规定时间内只执行最后一次 代码解析： // 1、定义一个业务处理函数 function search() { console.log('业务处理函数执行,执行搜索', Math.random()) } // 2、防抖函数（事件触发每次都执行防抖函数，但是不一定执行业务处理函数） // 2.1 防抖函数设置1秒延迟执行业务函数 function fangdou () { setTimeout(search, 1000) } // 2.2、每次事件发生都要触发防抖.
js代码-防抖和截流函数
07-16
在JavaScript编程中，防抖（Debounce）和节流（Throttle）是两种常见的性能优化技术，主要用于控制函数的执行频率，特别是在处理高频事件时，如窗口的resize、scroll事件或者用户连续输入等。这两个概念虽然相似，但...
Vue中使用防抖与截流
01-17
而当我们处理用户输入或者页面交互时，为了优化性能和避免不必要的计算，常常会用到“防抖”（debounce）和“节流”（throttle）技术。这两个概念在JavaScript中尤为常见，尤其在事件监听和响应式编程中发挥着重要...
防抖和节流
weixin_55639808的博客
12-19 1403
binding.arg接收按钮传过来的500，如果不传，这样引入的话按钮，binding.arg的值的undefined，有值的话类型是一个string类型，为什么要加parseInt，因为binding.arg的值是一个string类型，所以转换一下。可以根据需要进行调整。
防抖(debounce) 和 节流(throttling)
热门推荐
独碟的博客
07-05 14万+
防抖和节流是针对响应跟不上触发频率这类问题的两种解决方案。 在给DOM绑定事件时，有些事件我们是无法控制触发频率的。 如鼠标移动事件onmousemove, 滚动滚动条事件onscroll，窗口大小改变事件onresize，瞬间的操作都会导致这些事件会被高频触发。 如果事件的回调函数较为复杂，就会导致响应跟不上触发，出现页面卡顿，假死现象。 在实时检查输入时，如果我们绑定onkeyup事件发请求去...
函数的防抖和截流
zhzwei的博客
06-25 450
防抖和节流都是为了解决短时间内大量触发某函数而导致的性能问题，比如触发频率过高导致的响应速度跟不上触发频率，出现延迟、假死或卡顿的现象。 1. 防抖（debounce） 1.1 什么是防抖 在事件被触发n秒后再执行回调函数，如果在这n秒内又被触发，则重新计时。 1.2 应用场景 用户在输入框中连续输入一串字符后，只会在输入完后去执行最后一次的查询ajax请求，这样可以有效减少请求次数，节约请求资源； window的resize、scroll事件，不断地调整浏览器的窗口大小、或者滚动时会触发对应事件，防抖让
节流和防抖
qq_41860476的博客
10-15 3552
节流和防抖的目的：都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，防止在短时间内频繁触发同一事件而出现延迟，假死或卡顿的现象。 节流和防抖的区别： 节流：目前有一事件A设置了定时器，那么在delay之前触发，都只会触发一次 防抖：如果不断在delay之前重新触发，那么定时器会不断重新计时，最终会在最后一次完后才执行，对于需要实时响应的，应该用节流。 以下分别是节流和防抖的实现代码 节流 <script> /* 节流 思路： 节流是确保在delay之前只有一次事件触
截流和防抖
qq_45447899的博客
12-08 179
防抖：在高频事件触发后N秒内，该功能仅执行一次。如果在N秒内再次触发高频事件，将重新计算时间。截流：触发高频事件，但它仅在N秒内执行一次，因此节流将稀释函数的执行频率。
防抖，截流
weixin_52772897的博客
12-01 203
是指在事件触发结束后延时一段时间再去执行代码，如果在延时期间再次触发该事件，则重新计算延时时间。是指在规定时间内只触发一次事件，减少事件执行的频率；
掌握JavaScript防抖与截流函数的实现
在实际应用中，防抖和节流通常用于处理如窗口大小调整、滚动事件、输入框内容变化等频繁触发的事件，这些事件可能会导致浏览器性能问题，因为它们会非常频繁地执行回调函数。 防抖函数的实现一般会涉及到定时器的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值