The story after the hyperlink is disabled

Scenario:
A hyperlink button exists on a page. You can click it to obtain the SMS verification code. For example
Copy codeThe Code is as follows:
<A href = "javascript: reciverSms ()"> get the SMS Verification Code </a>
<Script type = "text/javascript">
Function reciverSms (){
Var sms = getSmsCode ();
}
</Script>

However, considering the frequent clicks to obtain the authentication code and the pressure on the relevant devices, we made a logic to allow the next click five seconds, so we came to the next version.
Copy codeThe Code is as follows:
Function reciverSms (obj ){
Var sms = getSmsCode ();
Obj. disabled = true;
Windows. setTimeout (function (){
Obj. disabled = false;
},5000 );
}

The Code logic is very simple. After a text message is obtained, the link is disabled for 5 seconds. However, there was nothing to think about. Although it turned out to be disabled after the hyperlink was disabled, you can still click it. It turned out to be a trap, so a third version was introduced.
Copy codeThe Code is as follows:
Function reciverSms (obj ){
If (obj. disabled ){
Return;
}
Var sms = getSmsCode ();
Obj. disabled = true;
Windows. setTimeout (function (){
Obj. disabled = false;
},5000 );
}

At this point, this function has been completed, but there is another thing I cannot think of. Previously, when the hyperconnection disabled attribute is set to true, it shows a gray unavailable state, but here is a special case. If this hyperlink is set

The css attribute style of color is not disabled in non-ie browsers, and ie is better. So the fourth version appeared.
Copy codeThe Code is as follows:
Function reciverSms (obj ){
If (obj. disabled ){
Return;
}
Var sms = getSmsCode ();
Obj. disabled = true;
AddClass (obj, "gray ");
Windows. setTimeout (function (){
Obj. disabled = false;
RemoveClass (obj, "gray ");
},5000 );
}

Through step-by-step improvement, a sesame function is finally completed. Although the example is small, it gives me a lot of thought.