javascript firebase recursion firebase-authentication countdown

Progress bar not resetting

I'm creating a countdown of 10 seconds, and at the end, some functions triggers.

These functions that recall the countdown function to start again. However, when it's called again, the bar is still full, resulting in a loop.

Here's the countdown function.

function LoadTime() {
firebase.auth().onAuthStateChanged(User => {
    if(User) {
        var RemainTime = 10;
        var DownTime = setInterval(function(){
            document.getElementById("progressBar").value = 10 - --RemainTime;
            if(RemainTime <= 0)
                clearInterval(DownTime);
            if (RemainTime == 0){
                storewager();
                if (Roulette.bet == 1) {
                    RouOutcome();
                }
                else {
                    LoadTime();
                }
            }
        },1000);
    } else {
        alert("please login");
    }
});

}

I want this functions to reset the progress bar each time it's triggered. Been stuck on this for a while, so any help is much appreciated.

EDIT:

Here's the tree of the functions.

Page load --> LoadTime --> (end of countdown) --> (Outcome process) --> RouOutcome() --> LoadTime().

Seems to be when LoadTime is triggered when it's already finished once, it seems to run the process multiple times. It may be to do with the alert boxes causing issues for the countdown.

Been stuck on this for hours, so any help is much appreciated.

EDIT 2: Here's are the relevant functions in the correct order. This is assuming the users picks a bet option, and enters a bet. I'm trying to create roulette. Is it possible that the issue could be with the alerts?

function LoadTime() {
Roulette.load = 1;
CoinFlip.load = 0;
document.getElementById().style.visibility = "hidden";
firebase.auth().onAuthStateChanged(User => {
    if(User) {
        console.log("user is logged in");
        Roulette.choice = 0;
        var RemainTime = 15;
        var DownTime = setInterval(function(){
            document.getElementById("progressBar").value = 15 - --RemainTime;
            if(RemainTime <= 0)
                clearInterval(DownTime);
            if (RemainTime == 0){
                storewager();
                if (Roulette.bet == 1) {
                    RouOutcome();
                }
                else {
                    LoadTime();

                }
            }
        },1000);
    } else {
        alert("please login");
    }
});
}

function storewager(){
var UserID = firebase.auth().currentUser.uid;
firebase.database().ref("Users").child(UserID).child("coinbet").set(0);
var coinwager = document.getElementById("coininput").value;
if (coinwager > 0) {
    Roulette.bet = 1;
    var balref = firebase.database().ref("Users").child(UserID).child("coinbet");
    firebase.database().ref("Users").child(UserID).child("coinbet").set(coinwager);
    var coinref = firebase.database().ref();
    coinref.child("coinbet").set(coinwager);
    BalVer();
}
else {
    alert("No bet was placed");
    Roulette.bet = 0;
    LoadTime();
}
}

function BalVer(){
var UserID = firebase.auth().currentUser.uid;
var dbRoot = firebase.database().ref("Users").child(UserID);
dbRoot.once("value", snap => {
    var cData = snap.val();
    var cBet = cData.coinbet;
    var uBal = cData.userbalance;
    var BalUp = uBal-cBet;
    if (BalUp < 0) {
        alert("You do not have enough balance")
        var BetWipe = firebase.database().ref("Users").child(UserID).child("coinbet").set(0);
    }
    else {
        changeuserbal();
    }

});
}

function changeuserbal(coinwager){
var UserID = firebase.auth().currentUser.uid;
var dbRoot = firebase.database().ref("Users").child(UserID);
dbRoot.once("value", snap => {
    var cData = snap.val();
    var cBet = cData.coinbet;
    var uBal = cData.userbalance;
    var BalUp = uBal-cBet;
    firebase.database().ref("Users").child(UserID).child("userbalance").set(BalUp);
     if (CoinFlip.load == 1) {
        CoinOutcome();
     }
     else {
         RouOutcome();
     }

});
}

function RouOutcome(UserID) {
var OutCome = 0 + (Math.random() * 10000);
var UserID = firebase.auth().currentUser.uid;
if (OutCome <= 10000) {
    if (Roulette.choice == 1) {
        alert("You won");
        var dbRoot = firebase.database().ref("Users").child(UserID);
        dbRoot.once("value", snap => {
            var cData = snap.val();
            var cBet = cData.coinbet;
            var uBal = cData.userbalance;
            var WinBal = cBet * 2 + uBal
            var NewBal = firebase.database().ref("Users").child(UserID).child("userbalance").set(WinBal);
            //UpdateBal();
            Roulette.comp = 1;
            LoadTime();
        });
    }
    else {
        alert("you lost/didn't place bet");
        Roulette.comp = 1;
        LoadTime();
    }
}
else if ((OutCome >= 4738) && (OutCome <=9474)) {
    var UserID = firebase.auth().currentUser.uid;
    if (Roulette.choice == 2) {
        alert("You won");
        var dbRoot = firebase.database().ref("Users").child(UserID);
        dbRoot.once("value", snap => {
            var cData = snap.val();
            var cBet = cData.coinbet;
            var uBal = cData.userbalance;
            var WinBal = cBet*2+uBal
            var NewBal = firebase.database().ref("Users").child(UserID).child("userbalance").set(WinBal);
            //UpdateBal();
            LoadTime();
        });
    }
    else {
        alert("you lost/didn't place bet");
        LoadTime();
    }
}
else {
    var UserID = firebase.auth().currentUser.uid;
    if (Roulette.choice == 3) {
        alert("You won");

        var dbRoot = firebase.database().ref("Users").child(UserID);
        dbRoot.once("value", snap => {
            var cData = snap.val();
            var cBet = cData.coinbet;
            var uBal = cData.userbalance;
            var WinBal = cBet*14+uBal
            var NewBal = firebase.database().ref("Users").child(UserID).child("userbalance").set(WinBal);
            //UpdateBal();
            LoadTime();
         });
    }
    else {
        alert("you lost/didn't place bet");
        LoadTime();
    }
}
}

Thanks very much for your help, if you need any more info please say.

Solution

Here is an example I created for you to follow. You don't show you attempt at resetting the bar so this is the best I can do at explaining for now.

var pBar = document.getElementById("progressBar");
var pText = document.getElementById("progressText");
startTimer();

function startTimer() {
  var downIncrement = 10;

  var DownTime = setInterval(function() {
      var currentValue = pBar.getAttribute("aria-valuenow");
      var newValue = currentValue - downIncrement;

      pBar.setAttribute("aria-valuenow", newValue);
      pBar.style = "width:" + newValue + "%";
      pText.textContent = newValue / 10;
      if (newValue <= 0) {
        console.log("time is up!");
        clearInterval(DownTime);
        var Roulette = storewager();
        if (Roulette.bet == 1) {
          RouOutcome();
        } else {
          LoadTime();
        }
      }
    },
    1000);
}

function storewager() {
  console.log("done with store wager");
  return {
    bet: 1
  };
}

function RouOutcome() {
  console.log("done with RouOutcome");
  // restart progress bar
  LoadTime();
}

function LoadTime() {
  pBar.setAttribute("aria-valuenow", 100);
  pBar.style = "width: 100%";
  pText.textContent = "10";
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="progress">
  <div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%">
    <span id="progressText">10</span>
  </div>
</div>