How to handle timer button to not to display negative values on click?-CodePudding

I have a button. After clicking on it , 10 seconds timer starts on button with changing text. When i click in between the timer it decrements the value by one. And at the last shows negative value. Also when timer becomes zero and i click button it becomes-1 , -2 It should not go below zero. Tried by many ways but couldn't solve the issue

Here is my code

timeLeft = 10;
function countdown() {
timeLeft--;
$("#tmp_button-72286").text("Download will be ready in " String(timeLeft) "seconds");

if (timeLeft > 0) {
  setTimeout(countdown, 1000);}
};

function timer(){
$("#tmp_button-72286").text("");
$("#tmp_button-72286").append('<a id="myLink" target="_blank" href="link"><button id="thor">Download Now</button></a>');

}
$("#tmp_button-72286").bind("click", (function () {
countdown();
var timer_var = setInterval(timer, 10 * 1000);
}));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="tmp_button-72286">Download Now</button>

CodePudding user response：

Try it. I just added variable done to check when function start and prevent from restart function.

let timeLeft = 10;
let done = false;
function countdown() {
    timeLeft--;
    $("#tmp_button-72286").text(
        "Download will be ready in "   String(timeLeft)   "seconds",
    );

    if (timeLeft > 0) {
        setTimeout(countdown, 1000);
    }
}

function timer() {
    $("#tmp_button-72286").text("");
    $("#tmp_button-72286").append(
        '<a id="myLink" target="_blank" href="link"><button id="thor">Download Now</button></a>',
    );
}
$("#tmp_button-72286").bind("click", function () {
    if (!done) {
        done = true;
        countdown();
        var timer_var = setInterval(timer, 10 * 1000);
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="tmp_button-72286">Download Now</button>

CodePudding user response：

With your script, the user can trigger the countdown every time they click the button. However, the user should just initiate the countdown, and the countdown should then be triggered by itself in 1 second intervals.

To achieve that, you can use a flag to check whether the timer has been initiated or not and trigger the countdown on user click only the first time:

let timeLeft = 10;
function countdown() {
  if (timeLeft > 0) {
    $("#tmp_button-72286").text("Download will be ready in " String(timeLeft) "seconds");
    setTimeout(countdown, 1000);
  } else {
    $("#tmp_button-72286").text("");
    $("#tmp_button-72286").append('<a id="myLink" target="_blank" href="link"><button id="thor">Download Now</button></a>');
  }
  timeLeft--;
};

let timerRunning = false;
$("#tmp_button-72286").bind("click", (function () {
  if (!timerRunning) {
    timerRunning = true;
    countdown();
  }
}));

*I also took the liberty to change the trigger of the final message to be when the timeLeft reaches 0 instead of using 2 independent timers, but you can still use your way like this:

let timeLeft = 10;
function countdown() {
  timeLeft--
  $("#tmp_button-72286").text("Download will be ready in " String(timeLeft) "seconds");
  
  if (timeLeft > 0) setTimeout(countdown, 1000);
};

function timer() {
  $("#tmp_button-72286").text("");
  $("#tmp_button-72286").append(
      '<a id="myLink" target="_blank" href="link"><button id="thor">Download Now</button></a>',
  );
}

let timerRunning = false;
$("#tmp_button-72286").bind("click", (function () {
  if (!timerRunning) {
    timerRunning = true;
    countdown();
    let timer_var = setInterval(timer, 10 * 1000);
  }
}));

CodePudding user response：

the code can be simplified like this, no need extra variable.

timeLeft = 10;
var tmpButton = $("#tmp_button-72286")

function countdown() {
  tmpButton.text("Download will be ready in "   String(timeLeft)   " seconds");
  if (timeLeft-- > 0)
    setTimeout(countdown, 1000);
  else
    tmpButton.prop('outerHTML', '<a id="myLink" target="_blank" href="link"><button id="thor">Download Now</button></a>');
};

tmpButton.on("click", countdown);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<button id="tmp_button-72286">Download Now</button>