前端知识分享--防抖和节流

最新推荐文章于 2024-03-20 22:03:32 发布
最新推荐文章于 2024-03-20 22:03:32 发布
阅读量247 收藏
点赞数
文章标签： 前端 javascript Powered by 金山文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71171795/article/details/129133188
版权

一:概念

防抖和节流两者都是优化性能的方法

防抖:持续触发不执行,一段时间不触发才执行

节流:持续触发也执行,只不过执行的频率变低了

翻译过来就是:防抖就是事件触发之后一段时间(可以理解为延时)然后在执行回调

二节流就是在事件触发的单位时间内重复触发也只执行一次,这就是二者的区别

二:应用场景

防抖:根据输入的内容请求接口、用于频繁触发的点击事件、input搜索框等

节流:页面大小缩放、下拉刷新等

只昂张327
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3：搜索框输入防抖实现整理笔记
m0_57781768的博客
12-30 2501
搜索」这个场景在各种业务的系统中都是是非常常见的，比如电商平台的商品搜索、百度搜索、掘金搜索、google搜索......，只要是有内容呈现给用户的，都少不了搜索功能。输完关键字后手动触发搜索输入字符自动搜索第一种是由用户去决定何时进行搜索，没啥问题。第二种是通过监听用户录入的事件自动搜索，自动搜索能在一定程度上提升用户体验（比如在用户输入时关键词联想提示），同时也可能会带来问题，因为input事件触发是非常频繁的，比如下面这个示例：打开百度的搜索，找到输入框的dom，然后绑定一个input。
vue移动端实现下拉刷新
08-27
我们通过原理讲解以及代码实例给大家分享了关于VUE实现移动下拉刷新的功能，有的朋友可以跟着学习下。
Vue移动端 自定义下拉刷新事件 + 防抖
R_xxxxx的博客
08-03 632
/** * 函数防抖 */ export function debounce(fn, delay) { // 记录上一次的延时器 var timer = null; var delay = delay || 200; return function () { var args = arguments; var that = this; // 清除上一次延时器 clearTimeout(timer) timer = setTimeout(funct.
前端性能优化：防抖与节流
M_emory_的博客
03-20 376
一、防抖和节流主要是干什么的 防抖和节流主要用于控制函数执行的频率，通过限制函数的触发次数，避免函数被过度调用而引发的性能问题或产生不必要的副作用。 防抖和节流能够优化函数执行频率，提升性能，控制事件触发频率，优化用户输入，实现平滑动画等。在需要控制函数执行频率以避免资源浪费、提高交互体验或优化动画效果的场景中，防抖和节流都是非常有用的技术手段 如果还是不太能理解他俩的区别，之前我在一个评论区看到一个神评：“防抖就是回城，节流就是放技能”，相信看到这句话，就能通俗易懂的理解他俩之间的区别了。
input 搜索防抖
qq_40315971的博客
09-06 1127
防抖(debounce)：对于短时间内连续触发的事件（上面的滚动事件），防抖的含义就是规定事件发生的n毫秒后再执行，如果n毫秒内事件再次被触发，则定时器重新开始计时，直至定时器倒计时结束。 效果：如果短时间内大量触发同一事件，只会执行一次函数。 节流(throttle)：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新生效。 效果：如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不再工作，直至过了这段时间才重新
微信小程序的（防抖,节流）,解决用户一直下拉刷新请求或一直点击按钮提交信息等；获取列表信息,实现刷新数据功能
essnbb的博客
06-28 871
实现了简单的上滑刷新数据功能，解决了用户一直下拉刷新，或注册登陆一直点击提交!严重造成浏览器崩溃或浪费资源！
vue实现防抖搜索--中文输入法即时查询
w1060436872的博客
02-02 349
在实际项目中经常会用到input输入框来实现键入搜索,一般的步骤就是用户在输入后点击查询按钮进行查询调接口就完事了.但是有的时候会要求输入时就进行搜索了,那么此时会出现即使使用的中文输入法,也会输出单个的字母,如图所示。：如果你持续触发一个事件，防抖的作用是延迟执行，直到在一定时间内没有新的触发，再执行一次。这种技术通常用于处理连续的输入，例如用户在搜索框中输入时，只有在用户停止输入一段时间后才发送请求。简单来说，防抖是“一定时间内只触发一次”，而节流是“一定时间内只处理一次”。
【Vue】Vue项目需求--实现搜索框输入防抖处理
m0_61486963的博客
09-12 4652
在Vue开发中，遇到了`搜索框输入防抖处理`，算是防抖的使用场景之一吧，抽象其逻辑记录下来以备后用 - **场景需求：** - 搜索输入时 ，判断用户在输入完成后 实现`即时的自动搜索` - 并且要防止`过度自动搜索`消耗性能
前端防抖与节流超详细讲解
热门推荐
博哥的二进制世界
04-15 1万+
前端防抖与节流超详细讲解前言防抖什么是防抖实现防抖函数节流什么是节流实现节流函数防抖与节流注意事项 前言 防抖与节流通常作为项目优化的手段，一般都是为了防止用户在短时间内快而频地多次操作，触发动作执行。比如防止用户点击多次提交按钮，触发表单多次提交；防止用户拉动滚动条，多次触发加载更多等情况 防抖 什么是防抖 防抖，顾名思义，就是防止抖动，简而言之就是多次快速频繁地触发事件，也只会执行一次事件函数，但是要记住，需要加上一个时间限制（总不能上一次触发和下一次触发前后相隔半个钟，也才执行一次吧？这样就不是防抖了
防抖和节流
weixin_42378006的博客
09-17 316
https://www.jianshu.com/p/c8b86b09daf0 防抖（debounce） 所谓防抖，就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。 防抖函数分为非立即执行版和立即执行版。 节流（throttle） 所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。 对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。 ...
02-节流和防抖.md
最新发布
03-31
大厂前端面试题目|# 前端基础知识 HTML CSS JS HTTP 等基础知识是前端面试的第一步，基础知识不过关将直接被拒。本章将通过多个面试题，讲解前端常考的基础知识面试题，同时复习一些重要的知识点。 ## 为何要考察 ...
基础知识：一文读懂防抖和节流
09-09
基础知识：一文读懂防抖和节流
FE-Review:前端知识点复习
03-14
JavaScript部分实现CORS TCP三次握手，四次挥手 网络存储深浅拷贝 调用，应用和绑定实现 新实现类数组和参数创建对象方式继承方式节流和防抖 XSS，CSRF，SQL注入 cookie和SameSite HTTP状态码 Http和Https 网络套接...
Web-front-end-knowledge-summary:前端知识点总结
05-29
JavaScript基础DOM（文档对象模型）JavaScript 基本数据类型和引用数据类型JS数据类型判断事件冒泡和事件捕获js中的事件委托或事件代理详解DOM 事件模型JS函数防抖和函数节流JavaScript 设计模式跨域解决方案页面间...
前端工程师面试必备开发知识视频教学合集
09-14
前端面试题 类型的传遇1.avi 06.面试题_去掉 数组中重复性的 数据avi ...节流和防抖.avi 09.面试题_css实 现三角形.avi 14.面试题跨域. avi 10.面试题_rem 适配，avi 15.面试题 _nodejs事件轮询 机制.avi
前端节流、防抖
qq_45560350的博客
01-19 2377
前缘节流按我/*** 节流*/},time)})前缘防抖} ">确认//binding.value()即调用传进来的方法!}, time);});},});
js 防抖与节流（setTimeout的应用）
tianmd_Eric的博客
09-03 2066
1.防抖（debounce） 防抖的作用是：当用户多次触发回调函数时，只触发最后一次操作的，其余的全部忽略掉； 在第一次触发事件时，不立即执行函数，而是给出一个期限值比如200ms 如果在200ms内没有再次触发滚动事件，那么就执行函数 如果在200ms内再次触发滚动事件，那么当前的计时取消，重新开始计时 效果：如果短时间内大量触发同一事件，只会执行一次函数。 ...
前端性能优化之防抖&节流
~~~
10-06 2482
防抖和节流是前端开发中常用的两种性能优化技术。为什么需要防抖和节流呢？两者目的都是为了防止某个时间段内操作频繁触发，造成性能消耗。防抖：在事件被触发 n 秒后再执行回调，如果在这 n 秒内事件又被触发，则重新计时。节流： n 秒内只执行一次事件，即使n 秒内事件重复触发，也只有一次生效。
lodash-es 防抖和节流
10-11
lodash-es库中提供了防抖（debounce）和节流（throttle）这两个函数。防抖和节流都是用来控制函数的执行频率的。 防抖函数（debounce）在函数触发后会延迟执行一段时间，如果在延迟时间内再次触发，则重新计时。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值