시간 종료 버튼 사용 안함

Question

데이터를 게시하기 전에 유효성 검사 오류를 경고하는 조건이 양식이 있습니다. 문제는 다른 사람이 실수로 두 번 클릭하면 양식이 제출 된 후 첫 번째 클릭에서 양식이 삭제 된 다음 두 번째 클릭이 '양식 비어 있음'으로 표시되며 이는 모두 초당 분할로 발생하므로 혼란 스러울 수 있습니다. . 그래서 내가 원하는 것은 3 초 동안 클릭하면 일시적으로 버튼을 비활성화하는 것입니다. 하지만 지금은 버튼을 비활성화하는 것이 아니라 3 초 동안 전체 기능을 일시 중지합니다. 내가 어떻게해야하지? 여기에 양식의 단순화 된 버전이 있습니다. 감사합니다

$('#send').click(function(){ 

    var self = $('#send'); 
     setTimeout(function() { 
     self.disabled = false; 
    if(!$('#text').val()){ 
     alert('field empty'); 
    }else{ 
     $('#message').html('done'); 
     $('#text').val(''); 
    } 
    }, 3000); 
}); 

Answer 1

. 타임 아웃하면 3000 밀리 초 후에 버튼이 활성화됩니다.

Working demo

HTML :

<input id="text"> 
<input id="send" type="button" value="send"/> 
<div id="message"></div> 

자바 스크립트 :

$('#send').click(function(){ 
    var button = $(this); 
    button.attr('disabled', 'disabled'); 
    setTimeout(function() { 
     button.removeAttr('disabled'); 
    },3000); 
    if(!$('#text').val()){ 
     alert('field empty'); 
     button.removeAttr('disabled'); 
    }else{ 
     $('#message').html('done'); 
     $('#text').val(''); 
    } 
}); 

Answer 2

당신은 jQuery의 one() 대신 click()를 사용할 수 있습니다. 함수가 실행되면 언 바운드됩니다.
다시 활성화하려면 제한 시간을 입력하여 함수 끝에 다시 바인딩 할 수 있습니다. 당신이 결코 실제로 버튼을 비활성화없는 것 같은

당신의 방법을 사용하여, 그것은 본다 : 당신은 제대로 버튼을 비활성화되지 않습니다

this.disabled = 'disabled'; 

Answer 3

. 래핑 된 DOM 요소가 아닌 jQuery 객체에 .disabled 속성을 설정하고 있습니다.

시도 대신의

self.prop('disabled', false); 

:

self.disabled = false; 

편집 :

가 실제로 위의 코드를 다시 ebable 버튼에 시도했습니다. 버튼을 비활성화 할 코드가 없습니다.

즉시 유효성 검사를 수행하고 싶다고 생각합니다. setTimeout()에 대한 호출은 다음과 같이 버튼을 다시 활성화하는해야한다 : 내가 클릭의 버튼을 해제, 당신을 위해 작은 예제를 작성했습니다

$('#send').click(function() { 
    var self = $(this); 

    // Disable the button. 
    self.prop('disabled', true); 

    // Process click. 
    if (!$('#text').val()) { 
     alert('field empty'); 
    } else { 
     $('#message').html('done'); 
     $('#text').val(''); 
    } 

    // Cause the button to re-enable after 3 seconds. 
    setTimeout(function() { 
     self.prop('disabled', false); 
    }, 3000); 
});