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

时间:2023-02-14 17:10:00

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秒之后未返回数据,自动加载百分比,更多内容欢迎关注之后的文章