【vue hook】useTimeoutLoading-接口请求超过几秒后再显示loading动画

每个页面都重复写同样的逻辑代码,不仅冗余而且效率低下,而vue3的组合式函数就能够复用逻辑。

大家是否有遇到过这样的需求,网速快的时候loading动画会一闪而过,要求接口请求超过0.3s后再显示loading动画。要怎么做呢?

具体思路是定义一个变量loadingVisible来控制loading动画的出现,使用定时器延迟并侦听loading变化。

代码

新建一个useTimeoutLoading.js文件,代码如下

js 复制代码
import { ref, unref, watch, onBeforeUnmount } from 'vue'

const useTimeoutLoading = (loading, time = 500) => {
    let timeout = null
    const loadingVisible = ref(false)
    watch(
        () => unref(loading),
        value => {
            if (timeout) {
                clearTimeout(timeout)
            }
            if (value) {
                timeout = setTimeout(() => {
                    loadingVisible.value = true
                }, time)
            } else {
                loadingVisible.value = false
            }
        }
    )

    onBeforeUnmount(() => {
        if (timeout) {
            clearTimeout(timeout)
        }
    })

    return loadingVisible
}

export default useTimeoutLoading

如何使用

js 复制代码
<script setup>
import { ref } from 'vue'
import useTimeoutLoading from './useTimeoutLoading.js'

const loading = ref(false)
const loadingVisible = useTimeoutLoading(loading)
// 假装请求接口
const getData = async () => {
  loading.value = true
  const res = await getApi()
  loading.value = false
}
getData()
</script>
相关推荐
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
谢尔登8 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js
然我8 小时前
面试官:如何判断元素是否出现过?我:三种哈希方法任你选
前端·javascript·算法
kk_stoper9 小时前
如何通过API查询实时能源期货价格
java·开发语言·javascript·数据结构·python·能源
晨枫阳9 小时前
前端VUE项目-day1
前端·javascript·vue.js
颜酱9 小时前
抽离ant-design后台的公共查询设置
前端·javascript·ant design
绅士玖9 小时前
JavaScript 设计模式之单例模式🚀
前端·javascript·设计模式
Dream耀9 小时前
useReducer:React界的"灭霸手套",一个dispatch搞定所有状态乱局
前端·javascript·react.js
余大侠在劈柴9 小时前
pdf.js 开发指南:在 Web 项目中集成 PDF 预览功能
前端·javascript·学习·pdf
拾光拾趣录10 小时前
JavaScript屏幕切换检测方案
前端·javascript