控制彈窗展現順序

工做中遇到一個需求，就是控制用戶進入應用時自動打開彈窗的展現順序。

需求和現狀

用戶進入應用時會展現一系列的彈窗，這些彈窗的展現內容以及展現與否取決於進入應用時的一系列請求結果。因爲接口請求返回數據的時間不肯定，因此依賴不一樣接口的彈窗之間的展現順序也不肯定，且多個彈窗會出現疊加展現的問題，用戶體驗很很差。

產品需求就是但願彈窗的展現順序可控，而且同時只展現一個彈窗。

解決方案

解決思路是這樣：

封裝一箇中間層，全部的彈窗不直接展現出來，而是把展現的處理函數統一放在中間層的數據中，等待全部依賴接口都請求完成，也就是彈窗數據都加入到中間層以後，再按照既定順序依次執行彈窗的展現函數。

依照這個思路，我封裝了一個 PopControl 的類，針對上面幾點分別暴露了下面幾個 api：

- popControl.reset()，用來重置依賴接口狀態和彈窗數據
- popControl.load(key)，用來標記該接口已經請求完成
- popControl.push(key, callback, startDelay = 100, endDelay = 100, repeatPushShow = true)，用來把彈窗插入到彈窗隊列中
- popControl.next(key)，用來標記該彈窗已展現完成

項目 github 地址：前往

使用

具體使用的時候，須要先實例化出來一個 popControl，構造函數接收兩個參數，第一個參數全部彈窗的 key 組成的數組 popKeys（按照展現順序排序），第二個參數是全部依賴接口的 key 組成的數組。

而後在接口請求成功以後 load 對應的 key，把依賴該接口的彈窗展現函數 push 進 popControl 中，直到全部的接口都 load 完成，popControl 就會按照 popKeys 的順序依次展現彈窗。每一個彈窗展現完成以後要調用 popControl.next(key)，標記當前彈窗已經展現完成，方便展現下一個彈窗。

示例代碼以下：

import PopControl from "popControl"

const popKeys = ["pop1", "pop2", "pop3"];
const interfaces = ["ajaxSignin", "ajaxUseInfo"];
const popControl = new PopControl(popKeys, interfaces);

request("/ajaxSignin").then(() => {
  // 把依賴這個接口的彈窗展現函數 push 進彈窗隊列
  popControl.push("pop1", () => {
    // 展現 pop1 的操做
    this.showPop1 = true;
  })
  popControl.push("pop2", () => {
    // 展現 pop2 的操做
    this.showPop2 = true;
  })
  popControl.load("ajaxSignin);
})

request("/ajaxUseInfo").then(() => {
  // 把依賴這個接口的彈窗展現函數 push 進彈窗隊列
  popControl.push("pop3", () => {
    // 展現 pop3 的操做
    this.showPop3 = true;
  })
  popControl.load("ajaxUseInfo);
})

function pop1Close() {
  this.showPop1 = false;
  // 標記 pop1 已經展現完成，能夠展現下一個彈窗
  popControl.next("pop1");
}

function pop2Close() {
  this.showPop2 = false;
  // 標記 pop2 已經展現完成，能夠展現下一個彈窗
  popControl.next("pop2");
}

function pop3Close() {
  this.showPop3 = false;
  // 標記 pop3 已經展現完成，能夠展現下一個彈窗
  popControl.next("pop3");
}