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

需求和現狀

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

產品需求就是希望彈窗的展示順序可控，并且同時只展示一個彈窗。

解決方案

解決思路是這樣：

封裝一個中間層，所有的彈窗不直接展示出來，而是把展示的處理函數統(tǒng)一放在中間層的數據中，等待所有依賴接口都請求完成，也就是彈窗數據都加入到中間層之后，再按照既定順序依次執(zhí)行彈窗的展示函數。

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

- popControl.reset()，用來重置依賴接口狀態(tài)和彈窗數據

- 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");

}

關于找一找教程網

本站文章僅代表作者觀點，不代表本站立場，所有文章非營利性免費分享。

本站提供了軟件編程、網站開發(fā)技術、服務器運維、人工智能等等IT技術文章，希望廣大程序員努力學習，讓我們用科技改變世界。

[控制彈窗展示順序]http://www.zyiz.net/tech/detail-113174.html

總結

以上是生活随笔為你收集整理的html如何控制弹窗位置,控制弹窗展示顺序的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。