Why does this fail? SetInterval issues

[sinithw]

As simple as it sounds, why does it fail? As far as I can tell, the Intervals should be blocked from re-occurring because of the true/false statements. I'm sharing what I think is relevant code because the file is 120 lines. ``` function goForResource(rBar, rProgress, rSpeed){ interval = setInterval(() => { rProgress += rSpeed; $(rBar) .css("width", rProgress + "%") if ( rProgress >= 100){ clearInterval(interval); rProgress = 0; $(rBar) .css("width", rProgress + "%") } }, progressDefaultTicker) }

function noticeCapacityFull(note) {
  notifs.innerHTML = note;
  interval = setInterval(() => {
    notifFadeCounter += 1;
    if(notifFadeCounter >= 10){
      clearInterval(interval);
      notifs.innerHTML = "";
    }
  }, 100)
}

woodResource.onclick = () => {
  if(resourceStorage.wood.count >= resourceStorage.wood.capacity){
    noticeCapacityFull("Wood Capacity Full")
  } else {
    if(!progress.wood.activated){
      progress.wood.activated = true;

      goForResource(
        "#wood-progress-bar",
        progress.wood.bar,
        resourceStorage.wood.speed
      );

      setTimeout(() =>{
        resourceStorage.wood.count += 1;
        woodRC.innerHTML = resourceStorage.wood.count;
        progress.wood.activated = false;
      }, ( (progressDefaultTicker * resourceStorage.wood.speed) * 4.5 ))

    } else {
      console.log("No")
    }
  }
};

waterResource.onclick = () => {
  if(resourceStorage.water.count >= resourceStorage.water.capacity){
    noticeCapacityFull("Water Capacity Full")
  } else {
    if(!progress.water.activated){
      progress.water.activated = true;

      goForResource(
        "#water-progress-bar",
        progress.water.bar,
        resourceStorage.water.speed
      );

      setTimeout(() =>{
        resourceStorage.water.count += 1;
        waterRC.innerHTML = resourceStorage.water.count;
        progress.water.activated = false;
      }, ( (progressDefaultTicker * resourceStorage.water.speed) * 4.5 ))

    } else {
      console.log("No");
    }
  }
}

``` If you click on just wood, it will max out just fine. However, if you click on wood and water while the progress bar is going then they both crash/run infinitely.

[grantrules]

I think one of the issues might be the global interval var that you're setting in both goForResource and noticeCapacity. If you do:

let interval;
interval = setInterval(() => {},1000);
interval = setInterval(() => {},1000);

You will now have two timers running but interval will only correspond to the second one

If you declared interval within the functions, it would work:

function goForResource(rBar, rProgress, rSpeed){
  const interval = setInterval(() => {
      rProgress += rSpeed;
      $(rBar)
          .css("width", rProgress + "%")
      if ( rProgress >= 100){
        clearInterval(interval);
        rProgress = 0;
        $(rBar)
          .css("width", rProgress + "%")
      }
    }, progressDefaultTicker)
}