问题：uni.showLoading 无法正确显示或延迟显示如何解决？

Question

在使用 UniApp 开发过程中，开发者常遇到 `uni.showLoading` 无法立即显示或出现延迟的问题。这通常导致用户操作时缺乏反馈，影响体验。问题可能源于调用方式不当、页面渲染阻塞或异步任务未合理处理。本文将深入分析常见原因，并提供解决方案，包括正确使用 `uni.showLoading` 与 `uni.hideLoading` 配对、避免在主线程执行耗时操作、结合 `setTimeout` 控制显示时机等实践技巧。掌握这些方法，能有效提升应用交互流畅性与用户体验。

Answer 1

一、`uni.showLoading` 基本使用与常见问题

`uni.showLoading` 是 UniApp 提供的一个用于显示加载提示的 API，常用于异步请求或耗时操作期间，提升用户体验。其基本调用方式如下：

uni.showLoading({
    title: '加载中',
    mask: true
});
    

但在实际开发中，很多开发者会遇到 `uni.showLoading` 显示延迟甚至不显示的问题，导致用户在点击按钮后没有反馈，造成困惑。

二、原因分析：从表象到本质

1. 调用顺序不当：未正确配对调用 `uni.showLoading` 与 `uni.hideLoading`，导致加载状态无法正常更新。
2. 主线程阻塞：在主线程执行了大量同步计算任务，导致页面渲染和 UI 更新被阻塞。
3. 异步处理不合理：未将耗时逻辑包裹在 Promise 或 setTimeout 中，导致 `showLoading` 被延迟执行。

三、解决方案详解

1. 正确使用 showLoading 与 hideLoading 配对

确保每次调用 `uni.showLoading` 后都有对应的 `uni.hideLoading`，即使出现异常也要进行兜底处理。

try {
    uni.showLoading({ title: '加载中' });
    // 异步操作
} catch (e) {
    uni.hideLoading();
}
    

2. 避免在主线程执行耗时操作

UniApp 运行在 JavaScript 单线程环境中，所有 UI 渲染和事件处理都在主线程完成。若在此线程执行复杂运算，会导致 UI 冻结。

错误做法	推荐做法
直接在主线程循环处理大数据	使用 Web Worker 或 setTimeout 分批处理数据

3. 使用 setTimeout 控制显示时机

有时候，UI 的更新需要一定时间才能生效，可以借助 `setTimeout` 来延迟执行耗时逻辑，从而让 loading 动画先显示出来。

uni.showLoading({ title: '加载中' });
setTimeout(() => {
    // 执行异步请求或耗时任务
    uni.hideLoading();
}, 0);
    

四、进阶技巧与性能优化建议

• 结合 Vuex 管理全局 loading 状态，避免重复调用 show/hide。
• 对于多个异步请求，使用 Promise.all 并统一控制 loading 显示。
• 使用节流（throttle）或防抖（debounce）机制防止频繁触发 loading。

五、案例流程图展示

graph TD
            A[用户点击按钮] --> B{是否需要加载动画}
            B -->|是| C[调用 uni.showLoading]
            C --> D[执行异步任务]
            D --> E[任务完成]
            E --> F[调用 uni.hideLoading]
            B -->|否| G[直接执行操作]