Javascript setInterval重叠DOM更改

我正在使用

setInterval

对页面上的一些图像进行迭代，并在x秒过后隐藏/显示列表中的下一个图像。每隔30秒，我会发出一个

GET

请求，以检查来自服务器的新图像。因为http

http

请求需要大约一秒钟的时间，所以setInterval开始执行我的代码的下一次迭代，这会导致事情变得有点混乱。解决此问题的最佳方法是什么？以下是我的代码示例：

function play(){
    if(count == 30){
        sync();
        //while sync is running (because it takes so long) the play function is called again before the sync operation finishes. 
    }
    //iterate through the photos hiding and showing them each second. 
}

function sync(){
   //http request that takes about a second to complete and updates images on the page.
}
window.setInterval(function(){
    play();
    currentSeconds++;
    count++;
},1000);

像这样的

函数播放（）{
如果（计数=30）{
sync（）。然后（（）=>setTimeout（play，1000））；
}否则{
设置超时（播放，1000）；
}
currentSeconds++；
计数++；
}
函数sync（）{
//在这里使用承诺。
返回新承诺（（解决、拒绝）=>{
设置超时（（）=>{
解决（）；
}, 3000);
})
//完成和更新页面上的图像大约需要一秒钟的http请求。
}
play（）将您的http请求包装在承诺中，在解析时，您可以知道您拥有这些图像并继续您想要的行为。老实说，我不知道你为什么需要一个时间间隔，只要在解析时调用调用play，例如
sync（），然后（（）=>play（））
@astmatic我之所以使用
setInterval
是因为每隔一秒钟，我会检查（在
play（）
中）是否有图像需要更新，因为我的每个图像都有一个可变的显示时间。我明白。如果只允许在前一个同步完成后以类似的方式再次调用sync，怎么样。在同步开始时，将布尔值
同步设置为true，然后在解析时将其设置为false。在游戏中，
如果（计数>=30&&！同步）sync（）
@Asthmatic在
play（）
中，我有一组图像。每个图像都指定一个整数作为显示时间值。如果图像的显示时间为4，则在设置间隔的第4次迭代中，该图像将被隐藏，并显示下一个图像，直到其显示时间到期。在
play
中进行此操作时，我正在检查是否有任何新图像可用。在这个检查（http请求）过程中，
setInterval
的下一次迭代过早地执行，导致错误的图像在DOM上更新。我想这可能会起作用。