app直播原始碼，介面在5秒之後未返回資料，自動載入百分比

app直播原始碼，介面在5秒之後未返回資料，自動載入百分比

   //定義變數
    data(){
        return {
            timeOutObj: {},
            indexTime: 1, //定義時間初始值
            indexTimeInt: {},//定義時間計時器
            process: "0%", //定義進度百分比
            setAdd: {},//定義百分比累加計時器
        }
    }

法一：定時器setInterval實現 

        //開啟計時器，只需要在呼叫介面前開啟計時器
        openSetInterVal() {
            var self = this
            self.indexTime = 1 //定義一個初始值，用來計算秒數
            self.indexTimeInt = setInterval(() => { //定義一個計時器，
                if (self.indexTime >= 5) { //如果超過5秒執行，載入框
                    self.loading = true
                    self.indexTime = 1 //並初始化計時值
                    //下面是自動載入百分比，從0-95
                    var num = 1;
                    self.setAdd = setInterval(function () {
                        var len = 95;//顯示的最大數值，可以隨意設定
                        if (num >= len) { //如果大於95，就關閉計時器
                            clearInterval(self.setAdd)
                            clearInterval(self.indexTimeInt)
                        } else { //否則就加1
                            num += 1;
                        }
                        self.process = num + "%"
                    }, 20)
                } else { //沒有超過5秒，就每1秒indexTime加1
                    self.indexTime += 1
                }
            }, 1000)
        },
        // 關閉計時器，在介面成功返回資料時關閉計時器
        closeSetInterval() {
            this.indexTime = 1
            this.loading = false
            clearInterval(this.indexTimeInt)
            clearInterval(this.setAdd)
        },

法二：定時器setTimeout實現

用setTimeout實現，就是直接時間設定為5秒，儲存介面返回的response資料，判斷是否為空，如果為空，則說明介面響應時間大於5秒，就載入進度條，否則說明反應時間在5秒之內，不作操作。

            var self = this
            setTimeout(() => {
                if (JSON.stringify(self.timeOutObj) == '{}') {
                    self.loading = true
                    var num = 1;
                    self.setAdd = setInterval(function () {
                        var len = 95;//顯示的長度
                        if (num >= len) {
                            clearInterval(self.setAdd)
                        } else {
                            num = parseInt(num, 10) + 1;
                        }
                        self.process = num + "%"
                    }, 20)
                }
            },5000)

以上就是 app直播原始碼，介面在5秒之後未返回資料，自動載入百分比，更多內容歡迎關注之後的文章