lodash中flush的使用(debounce、throttle)

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

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()才会生效

相关推荐
chilling heart5 分钟前
JAVA---集合ArrayList
java·开发语言
同志3271318 分钟前
用HTML+CSS做了一个网易云音乐客户端首页
前端·css
小猪欧巴哟19 分钟前
pnpm install 安装项目依赖遇到 illegal operation on a directory, symlink 问题
前端·vue.js
独角仙梦境20 分钟前
🚀🚀🚀学习这个思路,你也能手撸自己的专属vip脚手架🚀🚀🚀
前端
小_t_同学21 分钟前
C++之类和对象:构造函数,析构函数,拷贝构造,赋值运算符重载
开发语言·c++
CJWbiu23 分钟前
Github Action + docker 实现自动化部署
前端·自动化运维
关山23 分钟前
在TS中如何在子进程中动态实例化一个类
前端
吃瓜群众i24 分钟前
兼容IE8浏览器的8个实用知识点
前端·javascript
前端烨27 分钟前
vue3子传父——v-model辅助值传递
前端·vue3·组件传值
GSDjisidi30 分钟前
日本IT行业|salesforce开发语言占据的地位
开发语言·职场和发展