Add disabled stories to hyperlinks

Situation:
There was originally a hyperlink button on a page, and you can get the SMS authentication code after clicking it. like

Copy the codeThe code is as follows:

 
<a href="javascript:reciverSms()">Get SMS authentication code</a>
<script type="text/javascript"> 
function reciverSms(){ 
var sms = getSmsCode(); 
} 
</script> 

However, considering the frequent clicks to obtain the authentication code, the pressure on the relevant equipment was put into practice. The logic was to allow clicking after 5 seconds, so the next version came again.

Copy the codeThe code is as follows:

 
function reciverSms(obj){ 
var sms = getSmsCode(); 
 = true; 
(function(){ 
 = false; 
},5000); 
} 

The code logic is very simple. After obtaining a text message, the link will be disabled for 5 seconds. But something I didn't think about came again. It turned out that although the hyperlink turned out to be disabled after it was disabled, it was still possible to click. It turned out to be a trap, so the third version came again

Copy the codeThe code is as follows:

 
function reciverSms(obj){ 
if(){ 
return; 
} 
var sms = getSmsCode(); 
 = true; 
(function(){ 
 = false; 
},5000); 
} 

At this point, this function should be considered to be done, but there is something I can't think of. I said before that when the hyperlink disabled attribute is true, it looks like a gray unavailable state, but there is a special case here, if this hyperlink is set

The css attribute style of color is not disabled on non-IE browsers. Finally, I see ie. So the fourth version appeared.

Copy the codeThe code is as follows:

 
function reciverSms(obj){ 
if(){ 
return; 
} 
var sms = getSmsCode(); 
 = true; 
addClass(obj,"gray"); 
(function(){ 
 = false; 
removeClass(obj,"gray"); 
},5000); 
} 

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