需求
当用户进行操作后会向后台请求数据,但数据并不是一次性返回,需要返回一部分就显示一部分。
后台的数据是从别的地方拉取过来的,持续不断的拉取,所以我只需要当后台拉取数据的时候,不停的调用显示数据的接口。
代码
<p v-if="taskStatus==='数据拉取中'">数据拉取中</p>
data () {
return {
taskStatus: '',
dataTimer: null,
}
},
created () {
// 是否开启定时器
if (this.taskStatus === '数据拉取中') {
this.dataTimer = setInterval(() => {
// 返回一个状态,如果不是数据拉取中则停止定时器,停止拉取数据
this.judgeStatus()
// 返回的数据渲染到页面
this.showData()
}, 5000)
}
},
destroyed () {
clearInterval(this.dataTimer)
},
methods: {
judgeStatus () {
axios.get('/judgeStatus').then((res) => {
if (res.status === 200) {
this.taskStatus = res.data.taskStatus
if (res.data.taskStatus !== '数据拉取中') {
clearInterval(this.dataTimer)
this.showData()
}
}
}).catch((error) => {
console.log(error);
})
}
}
定时器
// 设置
setInterval(function, milliseconds);
// 清除
clearInterval(id_of_setinterval)