前端基础-防抖和节流

最新推荐文章于 2023-11-11 16:30:06 发布
最新推荐文章于 2023-11-11 16:30:06 发布
阅读量162 收藏
点赞数
分类专栏： 前端开发常规问题及其解决方案 前端开发-js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55940198/article/details/118503615
版权
本文深入探讨前端开发中的两种重要技术——防抖和节流。防抖技术在高频事件中确保函数在最后一次触发后执行，如搜索框的搜索请求。而节流则限制了在特定时间内函数的执行次数，例如在连续输入时避免频繁更新搜索结果。理解这两者的区别并恰当应用，能有效提升前端应用的性能和用户体验。
摘要由CSDN通过智能技术生成

大家好,我是龙骑士,今天给大家讲一下前端基础:防抖和节流

  • 防抖 高频事件触发后, n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算冷却时间
  • 节流  高频事件n 秒内,函数不论触发次数,只会执行一次
  • 区别: 防抖是多次事件执行最后一次,节流是在n秒内多次事件只执行一次
    防抖案例:搜索信息,节流案例:输入同样内容,响应返回结果不变
龙骑士-黎明
关注
专栏目录
前端--js基础（实现防抖和节流）
m0_51123132的博客
06-07 945
防抖和节流
前端优化-防抖&节流
FOR 的博客
04-03 651
顾名思义，就是防止抖动的。比如验证码点击切换，用户快速点击了5次，但其实不用切换五次验证码，只需要切换一次就行了。那么就可以使用防抖。防抖的特点是一定时间内的连续多次的触发，只会执行一次真正的回调。节流是限制触发的频率，比如连续的滚动，scroll事件会被频繁的触发。如果这个时候，需要通过JS 去操作 DOM ，那么频繁的操作就会降低性能，导致页面卡顿这个时候，就可能需要使用节流，限制它 16 ms 执行一次，如果不需要太及时，30ms执行一次也可以。
节流
zxswg的博客
10-31 252
1 定义 —降低事件触发的频率 当一个事件持续触发时，我们期望降低事件触发的频率，事件处理函数还是会触发多次。比如在移动端手机浏览器对onscroll事件不能实时触发，就是在内部做了节流处理。 2.使用场景 在连续触发事件的场景中，需要降低事件触发的频次，使用节流。如上拉加载更多数据、图片懒加载（监听图片元素是否快到可视区域了）等 3.演示代码 <html lang="en"> <head> <meta charset="UTF-8" /> <meta n
Vue给按钮加上防抖
weixin_50083085的博客
03-06 949
Vue给按钮加防抖
前端开发中的防抖和节流
xuehu837769474的博客
04-03 1063
啥是节流？ 节流是保证在一段时间内，代码只执行了一次。这个一段时间内指的是不管用户操作了几次，最终仅执行一次。比如说一个按钮，用户狂点按钮，但是如果用节流技术的话，不管用户点击了几次，最终某个时间段内只执行了一次代码。这个时间段是可以自行设置，比如说每一秒执行一次。 啥是防抖？ 防抖其实和节流有些类似，毕竟它们的最终目的都是如出一辙。防抖是在一段时间结束之后，才触发一次事件。如果一段时...
前端必备技能之----节流
fang_my的博客
03-30 9014
节流
前端性能优化--防抖和节流
最新发布
qq_44971069的博客
11-11 132
1.防抖函数：一段时间内，只执行最后一次。防止抖动，它在短时间内多次触发同一个事件时，会取消之前的触发，直到最后一次触发后的一定时间间隔内没有新的触发才执行函数。（列举: 乘坐地铁，过闸机时，每个人进入后3秒后门关闭，等待下一个人进入。控制流量，它会在触发事件期间以固定的时间间隔执行函数，而不管事件触发得多频繁。（2）调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖。（throttle）是优化高频触发事件的技术，它们可以提高性能，避免不必要的计算和函数执行。
js代码-防抖和节流函数
07-14
在JavaScript编程中，...了解并正确使用防抖和节流是每个前端开发者必备的技能，它们在提升用户体验和降低资源消耗方面发挥着重要作用。在实际项目中，结合具体需求选择合适的优化策略，能有效地提高代码的运行效率。
前端进阶版本 ，性能优化—-防抖、节流、重绘与回流。
01-20
在前端性能优化中，防抖（Debouncing）和节流（Throttling）是两种常用的策略，主要用于处理频繁触发的事件，如滚动、窗口大小调整等，以提高应用程序的性能和响应速度。同时，理解浏览器的重绘（Repaint）和回流...
防抖和节流的例子解释
chen_ac的博客
06-29 559
防抖和节流的例子 防抖：触发事件在n秒内只执行一次，若在n秒内再次触发，则重新计算时间 如：在点击按钮之后，经过2秒钟时按钮会触发事件，如果在1.5秒时再次点击按钮，则需要重新计算2秒事件才会触发。 节流：连续发生的事件在n秒内只执行一次 也就是说在规定时间内，不管操作多少次，函数只会执行一次。 首先定义div标签用于显示页面操作 <div id="content" style="height: 150px;line-height: 150px;text-align: center;backgroun
JS的防抖(debounce)如何更合理？
weixin_55464074的博客
06-17 534
防抖，指定时间间隔内只能执行一次代码
Vue 防抖和节流
wnk1997的博客
02-15 624
防抖：比如股票交易用户不小心连续点了两次下达，为了避免下两笔单子，设置防抖，设置一个时间比如1s，在点击下达后等1s,如果1s内没有再次点下达，就可以成功下达指令了。如果又点了下达，重置1s的等待时间，再等1s,如果这1s没有点击，那就下达指令。 简单实现的逻辑代码： 公共函数utils.js里面写方法 /* * fn [function] 需要防抖的函数 * delay [number] 毫秒，防抖期限值 */ function debounce(fn, delay) { let timer = nu
前端常用方法——函数防抖节流(立即执行，非立即执行，时间节流，setTimeout节流 )
weixin_42192909的博客
01-12 2058
前端常用方法——函数防抖节流(立即执行，非立即执行，时间节流，setTimeout节流 ) 场景 ​ 函数防抖分为立即执行和非立即执行，立即执行是指开始立即执行一次，之后在指定时间后再执行才可以执行；非立即执行是指 执行过程中不执行，执行后过一段时间再执行 ​ 函数节流是指根据间隔时间执行 ​ 下面是其简易实现 防抖 // 非立即执行版 function debounce(fn,time) { let timer = null return function() { clearTimeout
按钮防抖（防止重复点击）
strugglebydreamlin的博客
09-23 1万+
写在前面 在日常开发中我们时长会遇到这样的问题，当用户点击某个按钮时触发一个http请求，从后端查询一些数据，或者做一些操作，而当用户无意或有意快速重复的点击按钮时，导致的后果就是重复的http请求或者完全没有重复必要的一些操作，毕竟站在程序的角度来考虑问题，这些操作是消耗cpu时间，消耗内存又完全没有必要的，甚至会造成程序的卡顿，所以我们就需要一种策略去防止这种情况的发生了
前端必会的“防抖”和“节流”方法
林恒的博客
02-25 1771
最近因为疫情隔离居家办公，闲着没事也在回忆和整合学过的知识，这里给大家分享几个有关“防抖”和“节流”方法，希望对大家有所帮助 1 前言 在前端开发过程中，会遇到很多实时输入查询、滚动条触发等业务。而这些频发操作的事件，如果每次触发都进行执行的话，会造成性能下降、后台的压力变大，那么此时就需要使用防抖和节流进行处理。 防抖和节流，见名思义：防抖是防止抖动，节流是节约流量。 2 防抖 防抖(D...
前端防抖与节流超详细讲解
热门推荐
博哥的二进制世界
04-15 1万+
前端防抖与节流超详细讲解前言防抖什么是防抖实现防抖函数节流什么是节流实现节流函数防抖与节流注意事项 前言 防抖与节流通常作为项目优化的手段，一般都是为了防止用户在短时间内快而频地多次操作，触发动作执行。比如防止用户点击多次提交按钮，触发表单多次提交；防止用户拉动滚动条，多次触发加载更多等情况 防抖 什么是防抖 防抖，顾名思义，就是防止抖动，简而言之就是多次快速频繁地触发事件，也只会执行一次事件函数，但是要记住，需要加上一个时间限制（总不能上一次触发和下一次触发前后相隔半个钟，也才执行一次吧？这样就不是防抖了
前端知识点之防抖和节流
PrototypeOne的博客
04-24 1446
防抖和节流 防抖 防抖是指在一定的时间内再次触发此事件,会清空上次的事件重新开始,如果制定的时间内没有再次触发,那么这个事件才会执行 例如: input输入信息,不可能每次按下都发起一个ajax请求,可以等一段时间内不输入了之后在发起请求 节流 节流是指在一定的时间同一事件只会触发一次,只有超过了这个时间才会再次出发 例如: 验证码60秒内不可以再次触发(实际开发肯定是使用禁止,但是原理和验证码一样) 原生JS实现节流防抖 防抖函数的作用就是控制函数在一定时间内的执行次数。防抖意味着 N 秒内函数只
原生js实现图片文件上传
龙骑士-黎明的博客
09-23 1460
图片上传、原生js
前端 vue 防抖和节流
06-08
前端开发中，防抖和节流是两种常用的优化技术，用于限制函数的执行频率，提升页面性能。 防抖（debounce）：指触发事件后在一定时间内函数只执行一次，如果在这段时间内又触发了该事件，则会重新计算函数执行时间。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

龙骑士-黎明

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值