前端通用需求代码
子车轻罗 2021/3/3 vue学习提升
# 定时器使用
# 前端通过定时器轮询发送请求
https://www.cnblogs.com/aurora-ql/p/13471561.html)
data () {
return {
pollingNum: 0,
isPolling: false
}
}
1
2
3
4
5
6
2
3
4
5
6
- 页面created阶段确定是否开启定时器
created () {
// 实现轮询
this.getPollingEvent() // 业务逻辑，检查是否开启定时器
console.log(this.isPolling)
this.polling(3000) // 默认启动定时器，设置间隔，由定时器内部确认是否继续执行业务逻辑，受this.getPollingEvent()影响
}
1
2
3
4
5
6
2
3
4
5
6
- 业务逻辑，检查是否开启定时器，如果是，则
this.isPolling = true
async getPollingEvent () {
var querylist = []
const { data: res } = await this.$http.get('/rtc/workorder/job', {
params: { query: querylist },
paramsSerializer: params => {
return qs.stringify(params, { indices: false })
}
})
if (res.errNo !== 0) {
return this.$message.error('查询工单信息失败')
}
if (res.data.length === 0) {
return
}
this.workroderData = res.data
this.pollingNum = res.data.length
this.isPolling = true
console.log(res.data)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
- 定时轮询主函数
polling (interval) {
// 轮询获取更新过程中的信息
this.stopSetInterval() // 检查关闭未完成的定时器
this.timer = setInterval(() => {
// 判断是否执行定时器
if (this.isPolling) {
console.log('当前有' + this.pollingNum + '个任务待查询')
this.getJobStatus() // 业务主逻辑
}
// 业务逻辑达到某个状态时主动关闭定时器
if (this.pollingNum === 0) {
this.isPolling = false
this.stopSetInterval()
}
}, interval)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
- 关闭定时器函数
stopSetInterval () {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
}
1
2
3
4
5
6
2
3
4
5
6
- 切换到其他页面时停止定时器
destroyed () {
this.stopSetInterval()
}
1
2
3
2
3
参考
