The story after adding disabled to the hyperlink_javascript skills-JS Tutorial-php.cn

The story after adding disabled to the hyperlink_javascript skills

WBOY

Release： 2016-05-16 18:14:14

Original

1007 people have browsed it

Situation:
There is a hyperlink button on a page. After clicking it, you can get the SMS verification code. For example,

Copy code The code is as follows:

Get SMS verification code

But considering the pressure on related devices caused by frequent clicks to obtain authentication codes, we made a logic that allows no more clicks until 5 seconds after clicking, so here we go again. Next version

Copy code The 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 getting a text message, the link will be disabled for 5 seconds. But something unexpected happened again. It turned out that after the hyperlink was disabled, it looked disabled, but it could still be clicked. It turned out to be a trap, so the third version came out

Copy code The code is as follows:

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

Now this function should be considered complete, but there is another thing that makes me wonder. As mentioned before, when the disabled attribute of the hyperconnection is true, the appearance is as follows Gray unavailable state, but there is a special case here. If this hyperlink is set with the CSS attribute style of

color, it will not appear disabled on non-IE browsers. Finally, I saw that alright. So the fourth version appeared.

Copy code The 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); 
} 

Step by step Improvements, a Sesame function is finally completed. Although the example is small, it gave me a lot to think about.