Wie zähle ich Zeit auf einer deaktivierten Schaltfläche mit Java Script Code?

Question

Ich habe eine Schaltfläche in meinem Projekt, die für 5 Sekunden deaktiviert ist. Ich möchte die Zeit nach jeder Sekunde (5,4,3,2,1 und 0) auf der deaktivierten Schaltfläche zählen, anstatt "Verarbeitung ..." im unteren Code anzuzeigen. Wie ist es möglich?

java script:

function lockoutSubmit(button) { 
      var oldValue = button.value; 
      setTimeout(function() { 
       button.setAttribute('disabled', true); 
       button.value = 'Processing...'; 
      }, 0) 

      setTimeout(function() { 
       button.value = oldValue; 
       button.removeAttribute('disabled'); 
      }, 5000) 
     } 

html:

<asp:Button ID="Button1" 
       runat="server" 
       Text="Click Me" 
       onclientclick="lockoutSubmit(this)" /> 

Answer 1

Für die Sekunden zu zeigen, können Sie dieses Formular nutzen.

• die Zählvariable erstellen "i"
• der setInterval Funktion

• fallen die setInterval Funktion innerhalb SetTimeout Funktion die Variable "i" in der Funktion setInterval

• Dekrement erstellen.

  var oldValue = button.value; 
      var i=5; //variable for to count the seconds 
      var interval = setInterval(function() { 
       button.setAttribute('disabled', true); 
       i-=1; 
       button.value = 'Processing '+ i +'...' ; 
      }, 1000) 
  
      setTimeout(function() { 
       clearInterval(interval); //drop the interval 
       button.value = oldValue; 
       button.removeAttribute('disabled'); 
      }, 5000) 
  

Ich hoffe, Ihnen helfen :)

Answer 2

Zunächst einmal, das ist keine gute Praxis so etwas zu tun. Wenn Ihr Fortschritt vor 5 Sekunden abgeschlossen ist, legen Sie Ihre Kunden für nichts auf. Wenn es nach 5 Sekunden nicht beendet werden konnte, wird der Knopf vor der richtigen Zeit wieder aktiviert. Was Sie tun müssen, ist auf einen Rückruf für alles, was Sie tun, auf diesen Button klicken und wenn der Prozess tatsächlich endet, aktivieren Sie diese Schaltfläche erneut.

Anyways, was Sie gefragt in OP kann wie folgt geschehen:

function lockoutSubmit(button) { 
    var oldValue = button.value; 
    button.setAttribute('disabled', true); 

    var sec = 5; 
    button.value = sec; 
    var timer = setInterval(function() { 
     sec--; 
     button.value = sec; 
     if (sec <= 0) { 
      button.value = oldValue; 
      button.removeAttribute('disabled'); 
      clearInterval(timer); 
     } 
    }, 1000) 
} 

Sie die erste setTimeout vergessen können, dann müssen Sie setInterval statt SetTimeout tun, da Sie die sec wollen für Schritt gezeigt Schritt werden . In diesem Intervall werden Sie den sec-Wert verringern und prüfen, ob er null erreicht und ob er die Schaltfläche wieder mit dem Standardwert aktiviert.

FIDDLE

Answer 3

Sie die statt setTimeoutsetInterval Funktion nutzen zu können. Der Unterschied zwischen diesen Funktionen besteht darin, dass setInterval die Funktion alle X Millisekunden ausführt, bis clearInterval aufgerufen wird.

function lockoutSubmit(button) { 
 
    var oldValue = button.value; 
 
    var value = 5; 
 
    button.setAttribute('disabled', true); 
 
    button.value = value; 
 
    var interval = setInterval(function() { 
 
    value--; 
 
    if (value < 0) { 
 
     clearInterval(interval); 
 
     button.value = oldValue; 
 
     button.removeAttribute('disabled'); 
 
    } else { 
 
     button.value = value; 
 
    } 
 
    }, 1000); 
 
}

<input type="button" value="Click Me" onclick="lockoutSubmit(this)"/>

Ich hoffe, das hilft: D

Answer 4

Sie stattdessen die setInterval und clearInterval Funktionen nutzen könnten.

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval

function lockoutSubmit(button) { 

    var oldValue = button.innerHTML, 
     countdown = 5, 
     intervalID; 

    button.setAttribute('disabled', true); 
    button.innerHTML= 'Processing...'; 

    intervalID = setInterval(function(){ 
     if(countdown===0) 
     { 
      clearInterval(intervalID); 
      button.removeAttribute('disabled'); 
      button.innerHTML = oldValue; 
     } 
     else 
     { 
      button.innerHTML = countdown--; 
     } 
    },1000); 
}