进度条不重置

Question

我正在创建 10 秒的倒计时，最后会触发一些功能。

这些调用倒计时功能重新开始的功能。但是，再次调用时，bar仍然是满的，导致循环。

这是倒计时功能。

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

}

我希望这个函数在每次触发时重置进度条。坚持了一段时间，所以非常感谢任何帮助。

编辑：

这是函数树。

页面加载--> LoadTime-->（倒计时结束）-->（结果过程）--> RouOutcome() --> LoadTime()。

好像是LoadTime在已经完成一次的情况下被触发，好像是运行这个过程多次。这可能与导致倒计时问题的警告框有关。

在这上面停留了几个小时，非常感谢任何帮助。

编辑 2：以下是正确顺序的相关功能。这是假设用户选择了一个投注选项，并进行了投注。我正在尝试创建轮盘赌。问题是否可能与警报有关？

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

非常感谢您的帮助，如果您需要更多信息，请说。

Answer 1

这是我为您创建的示例。你没有显示你试图重置栏，所以这是我现在能做的最好的解释。

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>

进度条不重置

Progress bar not resetting

javascript

firebase

recursion

firebase-authentication

countdown