상황:
페이지에 하이퍼링크 버튼이 있습니다. 클릭하면 SMS 인증 코드를 받을 수 있습니다. 예를 들어
단, 인증코드 획득을 위한 잦은 클릭으로 인한 관련 기기의 부담을 고려하여, 클릭 후 5초가 될 때까지 더 이상 클릭을 허용하지 않는 로직을 만들었습니다. , 그럼 다음 버전으로 넘어갑니다
function receiveSms(obj){
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
}, 5000);
}
코드 로직은 매우 간단합니다. 문자 메시지를 받은 후 5초 동안 링크가 비활성화됩니다. 그런데 또 예상치 못한 일이 일어났습니다. 하이퍼링크가 비활성화된 후에도 비활성화된 것처럼 보였지만 여전히 클릭이 가능하다는 것이 밝혀져 세 번째 버전이 나왔습니다
function receiveSms(obj){
if(obj.disabled){
return;
}
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
} ,5000);
}
이제 이 기능이 완료된 것으로 간주해야 하지만 앞서 언급한 것처럼 하이퍼커넥션의 비활성화 속성이 true일 때 궁금한 점이 하나 더 있습니다. 회색으로 표시되는 상태는 다음과 같은데, 여기서는 특수한 경우가 있는데, 이 하이퍼링크를
color 속성 스타일로 설정하면 IE 이외의 브라우저에서는 비활성화되어 표시되지 않는 것을 확인했습니다. 괜찮아. 그래서 네 번째 버전이 나타났습니다.
function receiveSms(obj){
if(obj .disabled){
return;
}
var sms = getSmsCode();
obj.disabled = true; windows.setTimeout(function(){
obj.disabled = false;
removeClass(obj,"gray");
},5000)
}
단계별 개선으로 Sesame 기능이 마침내 완성되었습니다. 비록 작은 예이지만 생각해볼 거리가 많이 생겼습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
