目錄

一、問題背景：閃爍現象的產生

二、完整解決方案代碼

三、核心防閃爍機制解析

1. 請求計數器（requestCount）

2. 延遲隱藏定時器（關鍵創新）

3. 100ms緩沖期的重要意義

四、關鍵場景對比分析

場景1：連續快速請求

五、為什么簡化方案不行？

六、設計思想總結

---

?

// 典型問題代碼
if (requestStart) {wx.showLoading();
}requestComplete() {wx.hideLoading(); // 快速切換導致閃爍
}

一、問題背景：閃爍現象的產生

在小程序開發中，當多個網絡請求快速連續觸發時，使用wx.showLoading()和wx.hideLoading()控制加載提示會出現閃爍問題：

閃爍原因：

1. 請求A完成 → 隱藏Loading

2. 請求B開始 → 立即顯示Loading

3. 用戶視覺感知：加載提示快速消失又出現 →?界面閃爍

二、完整解決方案代碼

let requestCount = 0; // 全局請求計數器
let timerId = null;  // 定時器ID// 請求開始時
if (loading) {requestCount++;if (requestCount === 1) {wx.showLoading({ title: "加載中...", mask: true });}
}// 請求完成時complete: function (params) {// 處理loading隱藏if (loading) {requestCount--;// 使用定時器防止loading閃爍 清除上一次的定時器if (timerId) {clearTimeout(timerId);timerId = null;}timerId = setTimeout(() => {if (requestCount <= 0) {requestCount = 0; // 確保不會為負數wx.hideLoading();// 清除定時器{最后一次請求}clearTimeout(timerId);timerId = null;}}, 500); // 500ms延遲，防止快速連續請求造成閃爍}},

?

三、核心防閃爍機制解析

1. 請求計數器（requestCount）

// 請求開始
requestCount++; // 增加計數// 請求完成
requestCount--; // 減少計數

• 作用：合并多個請求狀態

• 原理：

  • 當requestCount > 0時保持Loading顯示

  • 只有歸零時才允許隱藏

• 優勢：避免單請求完成就隱藏的問題

2. 延遲隱藏定時器（關鍵創新）

if (timerId) clearTimeout(timerId); // 取消前次待執行操作timerId = setTimeout(() => {// 最終檢查
}, 100);

• 雙重保護機制：

  1. clearTimeout：中斷前序未執行的隱藏操作

  2. setTimeout：延遲100ms執行最終狀態檢查

3. 100ms緩沖期的重要意義

時間點	無定時器方案	有定時器方案
請求B完成	立即隱藏Loading	計劃100ms后隱藏
請求C開始(50ms)	立即顯示 → 閃爍	清除隱藏計劃 → 保持顯示
最終效果	閃爍	持續平穩顯示

四、關鍵場景對比分析

場景1：連續快速請求

場景2：網絡波動請求?

五、為什么簡化方案不行？

問題代碼：

complete: function() {if (loading) {requestCount--;if (requestCount <= 0) {wx.hideLoading(); // 立即隱藏}}
}

?

致命缺陷：

1. 在快速連續請求場景下：

   • 請求B完成 → 立即隱藏

   • 請求C開始 → 立即顯示

   • 間隔可能小于50ms → 人眼可感知閃爍

2. 網絡波動時：

   • 請求失敗重試 → 顯示/隱藏頻繁切換

   • 用戶體驗割裂

六、設計思想總結

1. 狀態聚合：通過計數器合并請求狀態

2. 延遲響應：100ms緩沖期觀察后續請求

3. 操作可中斷：clearTimeout保證只響應最終狀態

4. 臨界值保護：requestCount = 0防止負數

防抖思想應用：這種模式本質是前端防抖(debounce)技術的變種，將高頻的狀態變更合并為單次穩定操作。100ms延遲經過實踐驗證，在用戶體驗和響應速度間達到最佳平衡。