js——防抖和节流

于 2024-07-24 20:36:16 发布
阅读量161 收藏
点赞数 6
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64536562/article/details/140672504
版权

一、防抖

  所谓防抖，就是指触发事件后在n秒内函数只能执行一次，如果在n秒内又触发了事件，则会重新

计算函数执行时间。

1.防抖是什么?

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

2.有什么使用场景呢?

搜索框搜索输入。只需用户最后一次输入完，再发送请求

手机号、邮箱验证输入检测
 

二、节流

所谓节流，就是指连续触发事件但是在n秒中只执行一次函数

1.节流是什么?

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

简单理解:在500ms内，不管触发多少次事件，只执行一次

2.有什么使用场景呢?

高频事件:鼠标移动 mousemove、页面尺寸缩放 resize、滚动条滚动scroll

一枚前端成长路上的小飞侠
关注
  • 6
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
sketchpad:JavascriptjQuery实践项目——创建画板网页
07-07
8. **性能优化**：由于频繁的`mousemove`事件可能导致性能下降，可以使用防抖(debounce)或节流(throttle)技术来限制绘制频率，确保画板的流畅性。 9. **保存与加载画作**：为了实现画作的保存和加载功能，可以将...
应用篇 2：事件的节流（throttle）与防抖（debounce）(2).md
04-01
可能是类似[“雅虎军规”](https://developer.yahoo.com/performance/rules.html?guccounter=1)和[《高性能 JavaScript》](https://book.douban.com/subject/5362856/)这样历久弥香的经典之作，也可能是搜索引擎聚合...
优雅而高效的JavaScript——防抖和节流
杜永康的博客
10-18 1418
防抖和节流是两种优化事件处理的方式，能够有效地提高页面性能和用户体验。在大量事件或者频繁触发事件时，使用防抖和节流可以降低事件处理的频率或延迟触发事件，从而避免页面卡顿、响应延迟等问题。防抖的基本原理是延迟触发事件，在事件停止触发一段时间后执行最后一次回调函数。通过使用防抖函数，可以将复杂的事件处理逻辑优化为延迟触发的形式。防抖适用于需要延迟触发事件，并在一定时间内只执行最后一次回调的情况。节流的基本原理是限制事件的触发频率，在一定时间只执行一次回调函数。
js——防抖和节流的区别和实现
fdadfas的博客
06-02 426
1.防抖 常见的滚动监听事件，每次滚动都会触发，如此太过浪费性能 思路：在第一次触发事件的时候，不是立即执行函数，而是给出一个delay时间值，例如200ms 如果在200ms内没有再次触发该事件，则执行函数 如果在200ms内有再次触发事件，则清除当前的计时器，重新开始计时器 效果：短时间内大量出发同一事件最终只会执行一次 实现：利用setTimeOut来实现计时器的功能 完整代码 ```javascript ......
JavaScript——防抖与节流
weixin_43599321的博客
03-27 666
防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数，在这 3 秒内如果遇到函数调用请求就重新计时 3 秒，直至新的 3 秒内没有函数调用请求，此时执行函数，不然就以此类推重新计时。
JS手写——防抖与节流
ZKH129的博客
06-17 1132
防抖与节流手写
js高阶——防抖和节流
Louis_77774的博客
10-18 208
js高阶——防抖和节流
Javascript请求性能——防抖和节流
Caroline的博客
08-23 2172
在前端开发中，会有一部分用户的行为会频繁的触发事件执行，而对于DOM操作、资源加载等耗费性能的处理，很有可能造成页面卡顿，甚至浏览器崩溃。函数节流（throttle）和函数防抖（debounce）就是为了处理类似需求应运而生的。 一、防抖 函数防抖就是函数在频繁需要触发情况时，只有等足够空闲的时间才去执行一次。好像公交车司机等人都上车以后才出站一样。 比如我们在做搜索框的时候...
前端面试题 —— 防抖和节流
Xiaoze的博客
12-08 1638
防抖：在第一次触发事件时，不立即执行函数，而是给出一个期限值比如1000ms，然后： 如果在1000ms内没有再次触发事件，那么就执行函数 如果在1000ms内再次触发事件，那么当前的计时取消，重新开始计时 规则：如果在规定时间内不断触发同一事件，只会执行一次函数。 实现：下面以滚动条事件举例，采用setTimeout这个函数来实现计时，然后借助闭包来实现： function debounce(fn,delay){ let timer = null //借助闭包 return funct
JavaScript——防抖&节流
NanChen的博客
09-16 4347
防抖和节流是防止高频率触发的事件 防抖，一般用在使用 onresize事件（onresize：当浏览器被重置大小时执行Javascript代码）、 oninput事件：在用户输入时触发。 如果事件进行高频率触发，很可能会导致服务器崩溃 那么就可以使用函数防抖进行优化，比如你乘坐电梯，电梯的机制是当人进入电梯 后，十秒钟内自动关门，这十秒钟内人可以进出，当到了十秒钟后，不管你有没有人进入出去都直接关门，准时运作。 那么节流就不一样了，同样是电梯十秒运作，如果十秒钟之内有人进入或者出去，那么十秒钟就
javaScript手写专题——防抖/节流/闭包/Promise/深浅拷贝
涵盖了计算机专业基础知识、数学建模相关实践、复杂网络论文研究、LeetCode算法刷题经验、C语言开发经验、前端Vue、React框架开发实战相关知识
04-07 1125
本文介绍了面试中常见的手写JS场景题目：如手写防抖、节流；手写Promise封装、手写深拷贝浅拷。手写深拷贝需要考虑很多细节，需要根据具体情况来进行处理。在前面的实现中，我们已经考虑了一些常见的情况，但是还有很多其他的情况需要考虑。在手写深拷贝时，需要考虑以下几种场景：特殊的对象：正则表达式、日期对象、Error 对象，使用构造函数创建新的对象Fuction对象：对象可能会有函数属性，例如构造函数或方法，这种情况下需要将函数原样复制过来，而不是执行函数。特殊类型：symbol迭代复制：Map
SpringBoot系列——防重放与操作幂等.doc
07-13
1. 前端页面表单提交按钮置灰不可点击+js 节流防抖：在前端页面中，使用 js 来控制提交按钮的状态，防止用户多次点击提交按钮。同时，使用节流防抖来限制提交按钮的点击频率。 2. Redis 防重 Token 令牌：使用 Redis...
golem_js
02-16
9. **性能优化**：事件委托、防抖和节流技术，以及内存管理，提升用户体验。 10. **TypeScript集成**：考虑引入静态类型检查，提升代码的稳定性和可维护性。 此外，"golem_js"项目可能还会涉及Node.js环境下的开发...
js-toolbox:js-工具箱
06-09
**JavaScript工具箱——js-toolbox** `js-toolbox` 是一个专门为JavaScript开发者设计的实用工具集合，它包含了一系列常见的函数和方法，旨在提高开发效率，简化代码编写过程。这个工具箱可能包括了字符串处理、...
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
最新发布
Gusha_的博客
07-23 702
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 957
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 769
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
Vue3企业级项目开发实战课-笔记记录
tuku0801的专栏
07-20 964
实践 Vue 3 自研组件库开发、Node.js 服务端开发、Vue 3 结合 Node.js 的全栈项目开发以及全栈项目的单元测试等大厂常见的项目技术场景
js 手写防抖和节流函数
04-16
好的，我可以回答你关于 JavaScript 手写防抖和节流函数的问题。 先，防抖和节流函数是为了解决高频率触发某个事件时，减少事件触发的次数，提高性能而设计的。 防抖函数的作用是在某个函数触发后，延迟一定的时间再执行这个函数，若在延迟时间内，这个函数又被触发，则重新计时，最后只会执行一次这个函数。以下是防抖函数的示例代码： ```javascript function debounce(func, delay) { let timer = null; return function () { const context = this; const args = arguments; clearTimeout(timer); timer = setTimeout(function () { func.apply(context, args); }, delay); }; } ``` 节流函数的作用是在某个函数触发后，不立即执行这个函数，而是等到一定的时间后，才执行这个函数，若在等待时间内，这个函数又被触发，则忽略这个函数的执行。以下是节流函数的示例代码： ```javascript function throttle(func, delay) { let timer = null; return function () { const context = this; const args = arguments; if (!timer) { timer = setTimeout(function () { func.apply(context, args); timer = null; }, delay); } }; } ``` 以上就是 JavaScript 手写防抖和节流函数的基本实现方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值