**
记录一下前端使用定时查询setInterval()遇到的问题。
**
- 有问题的定时查询方法
一般来说,我们会使用下面代码来执行定时查询方法
var timer = null;
// 需要定时查询的方法
function getData(){
getOnlineData().then(() => { // 数据查询
console.log('实时数据查询成功');
})
}
// 调用定时查询的方法
function setTimer (){
getData();
if (timer) clearInterval(timer)
timer = setInterval(() => {
getData();
}, 1000) // 设置1秒执行一次查询
}
// 执行定时查询
setTimer();
这种方法看似没什么问题,但是却有隐患。这种方法只适用于网络延时较低的情况下使用,如果你在网络信号不好的地方使用,你可能会遇到数据一直查询不出来的情况,打开F12调试时,发现方法一直有被定时执行,但是就是没返回结果,原因就是调用方法getOnlineData()查询实时数据时,因为网络信号差,没有马上把数据成功返回,这时下一次的查询已经开始执行了,导致数据一直无法以较快的速度成功返回,当数据成功返回时,这时的数据可能不是最新的了,非常的影响用户体验。
- 解决方案
解决思路就是等上一次查询执行完成后,在延迟1秒执行下一次查询,代码如下
var timer = null;
// 需要定时查询的方法
function getData(){
getOnlineData().then(() => { // 数据查询
// 1. 这里已经代表接口调用成功
// 2. 对数据进行相关处理
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
getData();
}, 1000) // 延迟一秒执行
})
}
// 执行定时查询
getData();