前端javascript使用定时查询setInterval()需要注意的问题

**

记录一下前端使用定时查询setInterval()遇到的问题。

**

1. 有问题的定时查询方法 一般来说，我们会使用下面代码来执行定时查询方法

var timer = null;
// 需要定时查询的方法
function getData(){
    getOnlineData().then(() => { // 数据查询
		console.log(实时数据查询成功);
	})
}
// 调用定时查询的方法
function setTimer (){
    getData();
    if (timer) clearInterval(timer)
    timer = setInterval(() => {
        getData();
    }, 1000) // 设置1秒执行一次查询
}
// 执行定时查询
setTimer();

这种方法看似没什么问题，但是却有隐患。这种方法只适用于网络延时较低的情况下使用，如果你在网络信号不好的地方使用，你可能会遇到数据一直查询不出来的情况，打开F12调试时，发现方法一直有被定时执行，但是就是没返回结果，原因就是调用方法getOnlineData()查询实时数据时，因为网络信号差，没有马上把数据成功返回，这时下一次的查询已经开始执行了，导致数据一直无法以较快的速度成功返回，当数据成功返回时，这时的数据可能不是最新的了，非常的影响用户体验。

2. 解决方案 解决思路就是等上一次查询执行完成后，在延迟1秒执行下一次查询，代码如下

var timer = null;
// 需要定时查询的方法
function getData(){
    getOnlineData().then(() => { // 数据查询
        // 1. 这里已经代表接口调用成功
        // 2. 对数据进行相关处理
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
            getData();
        }, 1000) // 延迟一秒执行
    })
}
// 执行定时查询
getData();