防抖和节流

简介: 在前端开发过程中,我们经常需要绑定一些持续触发事件,如:resize、scroll、mousemove等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁的去执行函数。

在前端开发过程中,我们经常需要绑定一些持续触发事件,如:resize、scroll、mousemove等等,但有些时候我们并不希望在事件持续触发的过程中那么频繁的去执行函数。

通常这种情况下,我们怎么去解决呢?一般来讲,防抖和节流是比较好的解决方案。


一、函数的防抖

1、什么是函数防抖

函数防抖(debounce):就是让某个函数在上一次执行之后,满足等待某个时间内不再触发此函数后再执行,而在这个等待时间内再次触发函数,等待时间可以重新计算,知道该函数在一定间隔内没有被调用时,才开始执行被调用方法(所谓防抖,就是指触发事件后在 n 秒内函数只能执行一次,如果在 n 秒内又触发了事件,则会重新计算函数执行时间。

2、应用场景

用户注册时候的手机号验证和邮箱验证

搜索框

3、通用写法

img_63f586d042b6d3fb95c662a0ba62e81b.png
去抖案例

4.举例

应用场景:假设我们网站有个所搜框,用户输入文本我们会自动联想匹配出一些结果供用户选择。

我们可能首先想到到的做法就是监听keypress事件,然后异步去查询结果

这个方法本事是没有错的,但是如果用户快速的输入一连串字符,假设是10个字符,就会在瞬间触发了10次请求,这无疑不是我们想要的。

我们想要的是用户停止输入的时候才去触发查询的请求,这个时候函数防抖可以帮助我们。

img_52e39b573c740070578306c0bb5df0c9.png

二、函数节流

1、什么是函数节流

函数节流(throttle):是让一个函数无法在很短的时间间隔内连续调用,当上一次执行完之后过了规定的时间间隔,才能进行下一次的函数调用。(所谓节流,就是指连续触发事件但是在N秒中只执行一次函数)节流会稀释函数的执行频率。

即每间隔某个事件去执行某个函数,避免函数的过多执行,这个方式就叫函数节流

2、应用场景

window对象的resize、scroll事件

拖拽时候的mousemove

射击游戏中的mousedown、keydown事件

文字输入、自动完成的keyup事件

3、通用写法

img_b9f2ec339c9e7e12b0b4e84454208f68.png

4、举例说明

应用场景:滚动浏览器滚动条的时候,更新页面上的某些布局内容或者去调用后台的接口查询内容的时候

同样的,如果不对函数调用的频率加以限制的话,那么可能我们滚动一次滚动条就会产生N次的调用。

但是这次的情况跟上面的有所不同,我们不是要在每次完成等待某个时间之后才执行函数,而是要每间隔某个时间去执行某个函数,避免函数的过多执行

img_cf7ae845f37dae831aa7de16d9025e12.png

可参考版本:https://www.jianshu.com/p/c8b86b09daf0

相关文章
|
Web App开发 机器学习/深度学习 语音技术
在ModelScope-FunASR中,语音识别系统中的声音活动检测
在ModelScope-FunASR中,语音识别系统中的声音活动检测【4月更文挑战第3天】
765 1
|
存储 前端开发 JavaScript
第六章(原理篇) 微前端间的通信机制
第六章(原理篇) 微前端间的通信机制
487 0
|
数据处理
【报错】value.toFixed is not a function
在处理数据时遇到`value.toFixed is not a function`错误,原因在于`value`是字符串类型而非数字。通过`typeof(value)`确认其为string。解决方法是先将`value`转换为Number类型,如使用`parseFloat()`,再执行小数位处理。
627 5
|
前端开发
webpack如何设置devServer启动项目为https协议
webpack如何设置devServer启动项目为https协议
1997 0
|
前端开发
websocket的心跳机制
websocket的心跳机制
1475 3
|
10月前
|
安全 搜索推荐 网络安全
外贸网站应该如何搭建?
建立优质的外贸网站需要进行需求分析、域名选择、SSL证书部署、建站产品选择、便利性和响应式设计以及高质量内容SEO优化。选择合适的模板、部署SSL证书和高质量内容是关键。建站门槛低,节省成本,同时提升用户体验和搜索引擎可见性。
315 2
|
JSON API 开发者
淘宝商品评价API的获取与应用
在数字化时代,电商平台如淘宝成为消费者购物的主要渠道。本文介绍如何使用淘宝开放平台的商品评论API获取并利用评论数据,以优化产品和服务,提升用户体验。内容涵盖API的重要性、准备工作、调用流程及代码实现,帮助开发者高效获取和分析数据。
383 3
|
应用服务中间件 nginx
Nginx nginx: [emerg] bind() to 0.0.0.0:8083 failed (48: Address already in use)
Nginx nginx: [emerg] bind() to 0.0.0.0:8083 failed (48: Address already in use)
797 1
|
Python
Mac安装Python3.12开发环境
Mac安装Python3.12开发环境
713 2
|
缓存 前端开发 JavaScript
前端性能优化方案
【8月更文挑战第15天】前端性能优化方案
657 2