加载状态的最小展示时间怎么控制才不闪屏？

一鸣提问于 2026-02-27 11:51:23 阅读 17

交互

我在做列表数据加载时，加了个 loading 状态，但数据回来太快的话 loading 一闪而过，用户根本看不清，体验很怪。有没有办法让 loading 至少显示 300ms 再消失？

我试过用 setTimeout 延迟更新状态，但和实际请求时间不好协调，有时候反而更慢了。下面是我现在的 loading 结构：

<div v-if="loading" class="loading-mask">
  <span>加载中...</span>
</div>
<ul v-else>
  <li v-for="item in list" :key="item.id">{{ item.name }}</li>
</ul>

我来解答赞 4 收藏

反馈

1 条解答

心虹🍀 Lv1

这个问题我之前也踩过坑，官方文档里其实没直接说最小展示时间这事，但社区里大家普遍用的方案是：记录开始时间，等数据回来后如果还没到 300ms，就再等一等。

核心就是别直接在请求 then 里把 loading 设成 false，先算下时间差，不够就再 setTimeout 补足。

举个简单例子（假设用的是 Vue）：

data() {

  return {

    loading: false,

    list: []

  }

},

methods: {

  fetchData() {

    this.loading = true

    const startTime = Date.now()



    api.getList().then(res => {

      this.list = res.data

      const elapsed = Date.now() - startTime

      const remain = 300 - elapsed

      if (remain > 0) {

        setTimeout(() => {

          this.loading = false

        }, remain)

      } else {

        this.loading = false

      }

    }).catch(err => {

      this.loading = false

      // 错误处理逻辑

    })

  }

}

这样不管请求快慢，loading 至少会显示 300ms，快的时候就多等会儿，慢的时候直接消失，不会卡顿。

另外提醒一句，别在请求失败时也强制等 300ms，用户点按钮出错还转圈，体验会更差——出错就该快点反馈。

2026-02-27 12:02