防抖和节流

最新推荐文章于 2024-06-14 15:02:13 发布
最新推荐文章于 2024-06-14 15:02:13 发布
阅读量79 收藏
点赞数
分类专栏： js 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57262819/article/details/125433920
版权

防抖 (回城效果) 只执行最后一次

在这里插入图片描述
防抖的主要就是,多次点击事件,只执行最后一次, 函数题里面有一个定时器 ,事件出发以后会清除上一次的定时器 ,注意一点 定时器的变量需要在函数体外面声明成为一个全局变量
在这里插入图片描述

***节流 (技能CD) 单位时间内只能触发一次 ***

在这里插入图片描述

在这里插入图片描述
节流要比防抖麻烦,
第一步: 函数体外面声明一个全局的判断条件
第二步: 函数体内部进行判断 如果满足执行下一步 不满足 跳出函数
第三步: 从新赋值
第四步: 一个定时器 再规定时间内部 只能执行一次定时器的函数体 同时对全局变量赋值 这样定时器执行完以后,就会进入下一次的业务逻辑(也就是说,在定时器的单位时间内部 多次点击事件触发 全局变量的值会进入判断 不符合条件直接退出函数 只有定时器内部的函数体执行完毕而且变量得到修改以后 才会判断成功)

鱼丸粗面(●'◡'●)o(*￣▽￣*)o
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
函数防抖和节流
qq_50906507的博客
11-16 605
函数防抖和节流
vue中使用防抖和节流
01-24
vue项目中防抖和节流的指令 在mian.js中use就可以全局使用了
JS防抖和节流
热门推荐
叶子yes的博客
08-27 1万+
在进行窗口的操作或者输入框操作时，如果事件处理函数用的频率无限制，会加重浏览器和服务器的负担，此时我们就可以用防抖（debounce）和节流（throttle）的方式来减少调用频率，同时又不影响实际效果。在设定的时间内触发一次事件，会在设定的时间结束之后执行该事件处理程序，如果在设定的时间内多次触发事件，则每次触发事件都会重新计时。（可以将防抖类比成电梯：第一个人进电梯之后，电梯会在5秒之后自动关闭电梯门，如果在这5秒内又有人进来了，那么电梯会重新等待5秒后再关门。）...
js防抖和节流
yihanzhi的博客
01-15 2756
防抖和节流一般应用于高频事件频繁触发的场景，如窗口大小改变，下拉加载，搜索等，可有效避免事件处理函数被频繁调用造成性能差的问题。 一、区别 防抖：指定时间内只执行一次，但在等待时间内再次触发事件，重新开始延时。 节流：指定时间内只执行一次。 二、介绍 1、防抖 防抖应用场景 – 搜索功能，实时响应用户输入，给出相关的建议词。 通常查询某个词，会频繁触发按键事件，如果每次都执行事件处理函数，不仅会产...
JavaScript防抖和节流
油墨香^-^的博客
02-22 574
作为学习，我们肯定不满足只会用第三方的库，成为一个API程序员。另外为了一个防抖函数引用整个库对最终打包项目的大小也会有影响。所以，我们要实现一个自己的防抖函数。注意，在整个实现过程中，我尽可能不采用ES6的语法；因为如果我们不babel来处理我们的代码，ES6以上的语法会存在兼容性问题；我们封装的防抖和节流函数就不太具备通用性；2.3.1. 防抖基本功能防抖函数的核心思路如下：当触发一个函数时，并不会立即执行这个函数，而是会延迟（通过定时器来延迟函数的执行）
学习防抖和节流
鹤渺的星球
05-17 336
以上就是关于防抖和节流的记录啦！总算深入的学习了。
如何区分防抖和节流
这个昵称没有被占用吧的博客
10-09 265
**防抖：**指在时间n内，函数被触发多次，但是只执行一次，只会执行最新的触发。也就是说，在时间n内，碰到新的触发，就清除之前的，重新计时。 **节流：**当持续触发某个事件时，会有规律的每隔时间n就才执行一次函数。 ...
防抖和节流Throttle and debounce.html
05-17
防抖和节流
JS防抖和节流实例解析
10-16
主要介绍了JS防抖和节流实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js防抖和节流的深入讲解
10-17
主要给大家介绍了关于js防抖和节流的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用js具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
深入了解JavaScript 防抖和节流
10-16
主要介绍了JavaScript 防抖和节流,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 406
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 570
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1441
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
HTML入门教程：深度解析HTML，开启你的前端技术之旅
zhangwenok的博客
06-14 1284
HTML（HyperText Markup Language，超文本标记语言）是前端开发的基础，它负责构建网页的结构和内容。作为前端技术栈的基石，HTML的掌握程度直接影响到网页的开发效率和用户体验。本教程将带你从零开始，逐步深入了解HTML的各个方面，帮助你打下坚实的前端技术基础。HTML是一种用于创建网页的标准标记语言，它通过一系列的元素（elements）和标签（tags）来定义网页的结构和内容。HTML文档由一系列的元素组成，这些元素通过标签来标识。
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 1077
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
盲盒App开发时有哪些技术框架可以借鉴
最新发布
bytekj的博客
06-14 527
在开发盲盒App时，可以根据项目需求和团队技术栈选择合适的技术框架。前端可以选择微信小程序框架、React Native或Vue.js等；后端可以选择Node.js或Spring Boot等；数据库可以选择MySQL或MongoDB等。同时，还需要考虑缓存、消息队列、支付和物流接口等其他技术来完善应用的功能和性能。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1279
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
axios防抖和节流
09-10
axios本身并不提供防抖和节流的功能，它是一个用于发起HTTP请求的库。防抖和节流是一种对事件处理函数进行优化的技术，可以用于限制函数的触发频率。在给定的时间间隔内，防抖只会执行最后一次触发的事件处理函数，而节流则会按照一定的时间间隔有规律地执行事件处理函数。这两种技术可以用于优化一些频繁触发的事件，如mousemove、scroll、resize、input等。 在你提供的引用中，第一个引用解释了防抖和节流的区别，第二个引用提到了一些使用防抖的场景，比如在window.onresize事件回调中触发echarts实例的重绘，或者在input标签的input事件中请求后端接口。但需要注意的是，这里提到的防抖并不是axios本身提供的功能，而是在使用axios发起请求时，可以结合防抖技术来控制请求的触发频率。 因此，在使用axios时，如果需要实现防抖或节流的功能，可以参考第二个引用中提到的场景，使用防抖或节流的方法来控制请求的触发频率，从而达到优化的效果。另外，第三个引用提到了在Vue中引入axios并将其加入Vue的原型中的方法，这是为了在Vue组件中方便地使用axios进行HTTP请求，与防抖或节流相关，只是为了提供一个便捷的请求方式，并不直接涉及防抖或节流的实现。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值