Tengo una cuenta regresiva en mi div .container2 pero cuando traté de recargar ese contenedor específico, se recargó perfectamente, pero mi cuenta regresiva no apareció y también se deshabilitó el botón.
<div id="container2"> <h4 id="title">Type Data here</h4> <div class="controls"> <div class="main-controls"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="btnCounter" disabled > File <span id="count"></span> </button> <div class="dropdown-menu"> <button id="txt-btn" class="dropdown-item" onclick="refreshDiv();"> Save </button> </div> </div> var spn = document.getElementById("count"); var btn = document.getElementById("btnCounter"); var count = 3; // Set count var timer = null; // For referencing the timer (function countDown() { // Display counter and start counting down spn.textContent = count; // Run the function again every second if the count is not zero if (count !== 0) { timer = setTimeout(countDown, 1000); count--; // decrease the timer } else { // Enable the button btn.removeAttribute("disabled"); } }()); function refreshDiv() { $('#container2').load(window.location.href + " #container2"); }Usted llama a la función countDown() solo en el momento inicial, ese es el problema. ¡en el botón, haga clic en llamar nuevamente a la función countDown() !
Prueba este código, te ayudará.
var count = 3; // Set count var timer = null; // For referencing the timer function countDown() { // Display counter and start counting down console.log(document.getElementById("count"), 'count'); document.getElementById("count").textContent = count; // Run the function again every second if the count is not zero if (count !== 0) { timer = setTimeout(countDown, 1000); count--; // decrease the timer } else { // Enable the button document.getElementById("btnCounter").removeAttribute("disabled"); } } countDown(); function refreshDiv() { $('#container2').load(location.href + " #container2"); document.getElementById("btnCounter").setAttribute("disabled", true); count = 3; setTimeout(() => { countDown(); }, 10); // set page reload time in timeout }¿que estás tratando de hacer? ¿Es algo como esto?
cuando se presiona el botón de recarga, ¿recargar div también funciona dentro de div? Entonces, ¿la función de cuenta regresiva se ejecuta de nuevo?
Espero que esto ayude, y te dé una pista.
var spn = $("#count") var btn = $("#btnCounter") var myInterval var count = 3 // Set count var timer = null // set interval without delay function setIntervalImmediately(func, interval) { func(); return setInterval(func, interval); } function countDown(sec){ myInterval = setIntervalImmediately(function () { $('#count').text(sec--); if (sec == -1) { clearInterval(myInterval); $('#count').text(""); btn.removeAttr("disabled"); } else{ btn.attr("disabled", "disabled") } }, 1000); } $(document).on("click", "#txt-btn", function(){ clearInterval(myInterval); refreshDiv() }) function refreshDiv(){ $("#container2").load(location.href + " #container2"); countDown(count) } $(document).ready(function(){ countDown(count) }) <div id="container2"> <h4 id="title">Type Data here</h4> <div class="controls"> <div class="main-controls"> <div class="dropdown"> <button class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" id="btnCounter" disabled> File <span id="count"></span> </button> <div class="dropdown-menu"> <button id="txt-btn" class="dropdown-item"> Save? do u mean reload? </button> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>