Skip to content

setInterval Overlapping DOM changes

I’m using setInterval to iterate through some images on a page and hide/show the next in a list after x seconds have passed. Every 30 seconds, I make a GET request to check for new images from my server. Because the http request takes about a second, setInterval begins executing the next iteration of my code which causes things to get a little screwy. What would be the best way to fix this issue? Here is a sample of my code:

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);

Answer

Something like this.

function play(){
    if(count == 30){
        sync().then(() => setTimeout(play, 1000));
    } else {
      setTimeout(play, 1000);
    }
    currentSeconds++;
    count++;
}
function sync(){
    // Use a promise here.
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve();
        }, 3000);
    })
   //http request that takes about a second to complete and updates images on the page.
}
play();

OR , use a flag and simply return if sync is busy.

var syncActive = false;
var currentSeconds = 0;
var count = 0;
function play(){
    console.log('trying to play');
    if(syncActive) return false;
    if(count == 30){
        sync();
        count = 0;
    }
    console.log(`could play - count: ${count}`);
    return true;
}
function sync(){
  syncActive = true;
  console.log('syncing');
  // DO LONG TASK
  sleep(5000).then(() => {
    // Note this code is in here to siumlate the long run.
    console.log('completed sync');
    syncActive = false;
  });
}
window.setInterval(function(){
    if(play()) {
      console.log('increase counts');
      currentSeconds++;
      count++;
    }
},100); //<-- reduced to 100 for demo.
// DUMMY CODE - Just for demo.
const sleep = (milliseconds) => {
  return new Promise(resolve => setTimeout(resolve, milliseconds))
};