vue函数防抖与节流的正确使用方法
作者:twinkle||cll 发布时间:2024-05-29 22:43:01
前言
1、防抖(debounce):触发高频事件后 n 秒内函数只会执行一次,如果 n 秒内高频事件再次被触发,则重新计算时间
举例:就好像在百度搜索时,每次输入之后都有联想词弹出,这个控制联想词的方法就不可能是输入框内容一改变就触发的,他一定是当你结束输入一段时间之后才会触发。
节流(thorttle):高频事件触发,但在 n 秒内只会执行一次,所以节流会稀释函数的执行频率
举例:预定一个函数只有在大于等于执行周期时才执行,周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时,你不断点刷新点购买,可是总有一段时间你点上是没有效果,这里就用到了节流,就是怕点的太快导致系统出现bug。
2、区别:防抖动是将多次执行变为最后一次执行,节流是将多次执行变成每隔一段时间执行。
函数的防抖与节流是一直的面试话题。对于函数防抖与节流的写法,大家都可能比较熟悉,但是在vue中使用函数的防抖或者节流,这里是有一个小插曲的哦。
vue中的正确使用姿势
在这个地方相信好多人的使用方式,会直接定义函数,然后在函数中使用debounce的 ,这样的使用方法是错误的。
为啥呢?这个和vue的事件绑定原理有关,这里不详细介绍。如果直接在函数体内部使用的话,最后的结果是,一个匿名的立即执行函数来进行执行,这样是不对的。详细参考
原理
函数的防抖
函数的防抖是在多少时间后再来执行函数,我们可以理解为这样的一种生活场景(坐升降电梯),在点击电梯的开门按钮后,电梯会开门,然后等待一段时间来关门。但是如果在等待的期间,有人再次点击开门按钮,那么电梯后继续等待关门时间,直到等待关门时间结束,没有人来点击开门按钮后,电梯才会开始工作。
代码书写
第一次非立即执行
export function debounce(f, t){
let timer;
return (...arg) => {
clearTimeout(timer);
timer = setTimeout(() =>{
f( ...arg)
}, t)
}
}
第一次立即执行
对于有些场景来说,第一次我不需要等待,需要立即执行,例如:打开控制台获取窗口试图大小(这里我们需要一直改变窗口的大小,等停下来再次获取窗口视图大小)。
export function debounceFirstExe(f, t){
let timer, flag = true;
return (...args) => {
if (flag){
f(...args);
flag = false;
}else {
clearTimeout(timer);
timer = setTimeout(() => {
f(...args);
flag = true;
}, t)
}
}
}
合并版本
export function debounce(f, t,im = false){
let timer, flag = true;
return (...args) => {
// 需要立即执行的情况
if (im){
if (flag){
f(...args);
flag = false;
}else {
clearTimeout(timer);
timer = setTimeout(() => {
f(...args);
flag = true
}, t)
}
}else {
// 非立即执行的情况
clearTimeout(timer);
timer = setTimeout(() => {
f(...args)
}, t)
}
}
}
函数防抖对于我们代码层面我们可以用在哪里呢?
在点赞、输入框校验、取消点赞、创建订单等发送网络氢气的时候,如果我们连续点击按钮,可能会发送多次请求。这个对于后台来说是不允许的。在鼠标每次 resize/scroll 触发统计事件。
函数节流
与函数防抖的胞兄,函数节流的原理也是大同小异,函数节流是在一定时间内我只会执行一次。
第一次非立即执行
export function throttle(f,t){
let timer=true;
return (...arg)=>{
if(!timer){
return;
}
timer=false;
setTimeout(()=>{
f(...arg);
timer=true;
},t)
}
}
在效果中,我们点击了非常多次,但是就只执行了4次,因为我规定的时间是1000ms执行一次。这样也是减少了执行次数。
第一次立即执行版本
export function throttleFirstExt(f, t) {
let flag = true;
return (...args) => {
if (flag) {
f(...args);
flag = false;
setTimeout(() => {
flag = true
}, t)
}
}
}
这里我们看到了,第一次点击会立马执行。
合并版
export function throttle(f, t, im = false){
let flag = true;
return (...args)=>{
if(flag){
flag = false
im && f(...args)
setTimeout(() => {
!im && f(...args)
flag = true
},t)
}
}
}
应用场景:
DOM 元素的拖拽功能实现(mousemove)
搜索联想(keyup)
计算鼠标移动的距离(mousemove)
Canvas 模拟画板功能(mousemove)
射击游戏的 mousedown/keydown 事件(单位时间只能发射一颗 * )
监听滚动事件判断是否到页面底部自动加载更多:给 scroll 加了 debounce 后,只有用户停止滚动后,才会判断是否到了页面底部;如果是 throttle 的话,只要页面滚动就会间隔一段时间判断一次.
总结
来源:https://blog.csdn.net/qq_41499782/article/details/116903825
猜你喜欢
- 学习python编程,首先要配置好环境变量。本文主要讲解python的环境变量配置,在不同版本下如何安装Windows打开Python官方下
- 1、 Python中 sys.argv的用法解释:sys.argv可以让python脚本从程序外部获取参数,sys.argv是一个列表,可用
- Python由Guido Van Rossum发明于90年代初期,是目前最流行的编程语言之一,因其语法的清晰简洁我爱上了Python,其代码
- 本文实例为大家分享了JavaScript实现淘宝网图片的局部放大的具体代码,供大家参考,具体内容如下要实现的效果如下:<!DOCTYP
- Sql Server 解决“用户登录失败,错误编号18456”1.说明因密码或用户名错误而使身份验证
- 文章摘要本文简单说明了FLV文件的格式,以此为出发点,使用 Python 实现FLV视频的拼接。一.FLV文件格式关于FLV文件格式的解析网
- alert("abacacf".replace('a','9')); alert(&qu
- Python upper()方法Python 字符串描述Python upper() 方法将字符串中的小写字母转为大写字母。语法upper(
- mysql字符串格式化今天有一个需求,mysql查询返回的格式为:80% ,而数据库中存储的是0.89的格式sql写法如下:select C
- 针对16G内存的配置tmp_table_size = 64M先说下tmp_table_size吧:它规定了内部内存临时表的最大值,每个线程都
- 目录简介js 中的迭代器是什么样子的迭代协议可迭代协议迭代器协议迭代过程迭代总结自定义迭代传统写法生成器函数写法简介迭代器是一种设计模式,可
- 有没有办法更快一点? 有没有办法一次性收缩所有数据库? alter database 数据库名 set recovery simple go
- 分享一个关于在pytest中,如何将测试用例文件中的变量传递到fixture函数。一、交代应用场景目前组内的项目,在根目录下是有一个conf
- 前言我们经常需要根据用户对自己数据的一些操作来做一些事情.比如如果用户删除了自己的账号,我们就给他发短信骂他,去发短信求他回来.类似于这种功
- 1.效果2.环境1.pytorch2.visdom3.python3.53.用到的代码# coding:utf8import torchfr
- 发送邮件概述:Django中内置了邮件发送功能,发送邮件需要使用SMTP服务,常用的免费服务器有:163、126、QQ注册并登陆163邮箱打
- 现像如下:站点无法打开,或者打开很慢.HTML可以打开.重新启动或者回收应用程序池可恢复.但过一段时间又会出现日志里会有:ISAPI
- 俄罗斯方块是俄罗斯人发明的一款休闲类的小游戏,这款小游戏可以说是很多人童年的主打电子游戏了,本文我们使用 Python 来实现这款小游戏。游
- mysql最常用的索引结构是btree(O(log(n))),但是总有一些情况下我们为了更好的性能希望能使用别的类型的索引。hash就是其中
- 本文实例讲述了Python实现的删除重复文件或图片功能。分享给大家供大家参考,具体如下:通过python爬虫或其他方式保存的图片文件通常包含