app直播源码，接口在5秒之后未返回数据，自动加载百分比

app直播源码，接口在5秒之后未返回数据，自动加载百分比

 

1	//定义变量<br>    data(){<br>        return {<br>            timeOutObj: {},<br>            indexTime: 1, //定义时间初始值<br>            indexTimeInt: {},//定义时间计时器<br>            process: "0%", //定义进度百分比<br>            setAdd: {},//定义百分比累加计时器<br>        }<br>    }

​

法一：定时器setInterval实现 

 

1

//开启计时器，只需要在调用接口前开启计时器<br>        openSetInterVal() {<br>            var self = this<br>            self.indexTime = 1 //定义一个初始值，用来计算秒数<br>            self.indexTimeInt = setInterval(() => { //定义一个计时器，<br>                if (self.indexTime >= 5) { //如果超过5秒执行，加载框<br>                    self.loading = true<br>                    self.indexTime = 1 //并初始化计时值<br>                    //下面是自动加载百分比，从0-95<br>                    var num = 1;<br>                    self.setAdd = setInterval(function () {<br>                        var len = 95;//显示的最大数值，可以随意设置<br>                        if (num >= len) { //如果大于95，就关闭计时器<br>                            clearInterval(self.setAdd)<br>                            clearInterval(self.indexTimeInt)<br>                        } else { //否则就加1<br>                            num += 1;<br>                        }<br>                        self.process = num + "%"<br>                    }, 20)<br>                } else { //没有超过5秒，就每1秒indexTime加1<br>                    self.indexTime += 1<br>                }<br>            }, 1000)<br>        },<br>        // 关闭计时器，在接口成功返回数据时关闭计时器<br>        closeSetInterval() {<br>            this.indexTime = 1<br>            this.loading = false<br>            clearInterval(this.indexTimeInt)<br>            clearInterval(this.setAdd)<br>        },

 

法二：定时器setTimeout实现

用setTimeout实现，就是直接时间设置为5秒，保存接口返回的response数据，判断是否为空，如果为空，则说明接口响应时间大于5秒，就加载进度条，否则说明反应时间在5秒之内，不作操作。

 

1

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

 

以上就是 app直播源码，接口在5秒之后未返回数据，自动加载百分比，更多内容欢迎关注之后的文章