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