Issue
I have a button with an "onclick" function that disables the button for 15 seconds. After that it will be automatically clickable, but in between 15 seconds of time period after a click, if I do refresh the page, it doesn't count the remaining seconds and the button is now clickable.
function up(){
$(document).ready(function () {
$("#upside").attr("disabled", true);
document.getElementById("downside").disabled = true;
setTimeout(function () {
$("#upside").removeAttr("disabled");
$("#downside").removeAttr("disabled");
window.location ='/Balnce_add';
},15000);
});
}
And here is my HTML button code:
<button id="upside" onclick="up()" type="submit" class="btn btn-success">Up</button>
Solution
The idea is save the startTime to localStorage. And then when we reload page, we will get the remainingTime = startTime + timer - currentTime. If remainingTime > 0, we will keep disable the button. If not, we do nothing.
And based on that idea, I updated your code to let it works. You can check the demo by the below code:
<html>
<head>
<title>Demo</title>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="upside" onclick="up(true)" type="submit" class="btn btn-success">Up</button>
<script>
function getRemainingTimer(isNew) {
var now = new Date();
var timer = 15000;
var remainingTimer = 0;
var startTime = localStorage.getItem("startTime");
if (startTime === null) {
if (!isNew) return 0;
localStorage.setItem("startTime", now.getTime());
remainingTimer = timer;
} else {
remainingTimer = timer + parseInt(startTime) - now.getTime();
}
return remainingTimer;
}
function up(isNew) {
var remainingTimer = getRemainingTimer(isNew);
console.log(remainingTimer);
if (remainingTimer > 0) {
$("#upside").attr("disabled", true);
$("#downside").attr("disabled", true);
var timeout = setTimeout(function() {
$("#upside").removeAttr("disabled");
$("#downside").removeAttr("disabled");
window.location = '/Balnce_add';
localStorage.removeItem("startTime");
}, remainingTimer);
} else {
localStorage.removeItem("startTime");
}
}
up(false);
</script>
</body>
</html>
Also, you can check the live demo at https://codepen.io/tuandaodev/pen/NWgBjbv
Answered By - Tartarus
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.