lodash中flush的使用(debounce、throttle)

server/2024/10/20 20:55:08/

在项目的配置中,看到了一个请求,类似是这样的

javascript">import { throttle } from 'lodash-es'// 请求函数
async function someFetch(){const {data} = await xxx.post()return data
}// 节流函数
async function throttleFn(someFetch,1000)// 执行拿到数据函数
async function getDataFn(enforcement){return enforcement? await throttleFn.flush() : await throttleFn()
}

        逻辑很简单,因为有个节流函数1秒执行一次,所以接收了一个 enforcement 作为参数来让节流函数失效,让请求再强制执行一次。

        但你会发现,执行 getDataFn(true),请求函数 someFetch.flush() 并没有去发送请求,而直接执行getDataFn(),则可以发送请求。

原因如下:

someFetch.flush() 只会在 someFetch()执行的过程中去执行,单独执行someFetch.flush()是不会发送请求的,或许可以考虑改用以下这种写法

javascript">// 执行拿到数据函数
async function getDataFn(enforcement){if(enforcement){return ((await throttleFn()) && (await throttleFn.flush()))}return await throttleFn()
}

总结:在使用debounce 和 throttle 的时候使用flush()强制执行时,确保节流和防抖接受的函数正在执行过程中,flush()才会生效


http://www.ppmy.cn/server/55897.html

相关文章

短信验证码实现

一、设置AccessKey 创建用户并配置使用权限,使我们拥有调用 aliyunAPI 的权限,之后会生成 AccessKeyID 和 AccessKey密码,后面我们会使用到。需要注意的是 AccessKeyID 和 AccessKey密码生成后我们需要将他保存起来,否则后期无法查…

VueDraggable拖拽

import { VueDraggable } from ‘vue-draggable-plus’ <VueDraggable style“display: flex;flex-wrap: wrap;” v-model“fileListResourcesImgs” end“onEnd”> <div class“icon-container” click“changeResourcesImgsIndex(index)”> <span class“del…

js好用的动态分页插件

js好用的动态分页插件是一款简单的分页样式插件&#xff0c;支持样式类型&#xff0c;当前页&#xff0c;每页显示数量&#xff0c;按钮数量&#xff0c;总条数&#xff0c;上一页文字&#xff0c;下一页文字&#xff0c;输入框跳转等功能。 js好用的动态分页插件

新书速览|Adobe Firefly:萤火虫:AI绘画快速创意设计

《Adobe Firefly&#xff1a;萤火虫&#xff1a;AI绘画快速创意设计》 本书内容 人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;浪潮的席卷已经变成不可阻挡的趋势&#xff0c;伴随着这种变化&#xff0c;在图形设计、图像制作、绘画领域也相应发生了…

mysql 命令 —— 查看表信息(show table status)

查询表信息&#xff0c;如整个表的数据量大小、表的索引占用空间大小等 1、查询某个库下面的所有表信息&#xff1a; SHOW TABLE STATUS FROM your_database_name;2、查询指定的表信息&#xff1a; SHOW TABLE STATUS LIKE your_table_name;如&#xff1a;Data_length 显示表…

新手学Cocos报错 [Assets] Failed to open

两个都在偏好设置里面调&#xff08;文件下面的偏好设置&#xff09;&#xff1a; 1.设置中文&#xff1f; 2.报错 [Assets] Failed to open&#xff1f; 这样在点击打开ts文件的时候就不会报错&#xff0c;并且用vscode编辑器打开了&#xff0c; 同样也可以改成你们自己喜欢…

[C 语言] 嵌套结构体

结构体理解&#xff1a; 起始结构体就是一个类型&#xff0c;而用这个类型下有不同的成员。 每个成员在共同的类型下有相同的属性。 比如有一个班级的类&#xff0c;班级的类下有学生这种类型&#xff0c;而不同的学生有名字&#xff0c;年龄&#xff0c;班级信息这种属性。学生…

【CSS】什么是CSS的columns属性

CSS的columns属性是一个简写属性&#xff0c;它允许你同时设置column-count&#xff08;列数&#xff09;和column-gap&#xff08;列间隙&#xff09;的值&#xff0c;用于在文本内容中创建多列布局。这个属性主要用于提高长文本内容的可读性和页面的美观性&#xff0c;通过将…