웹 양식 제출 시 클릭 디바운스

StackOverflow https://stackoverflow.com/questions/97962

  •  01-07-2019
  •  | 
  •  

문제

우리가 인터페이스하는 잘못 작성된 백엔드 시스템이 우리가 생성하는 로드를 처리하는 데 문제가 있습니다.로드 문제를 해결하는 동안 우리는 생성되는 추가 로드를 줄이려고 노력하고 있습니다. 그 중 하나는 동일한 사용자가 다른 제출을 했더라도 백엔드 시스템이 계속해서 양식 제출을 시도하고 서비스한다는 것입니다.

우리가 발견한 한 가지는 사용자가 양식 제출 버튼을 두 번 클릭한다는 것입니다.이러한 클릭을 방지하고 두 번째 양식 제출을 방지해야 합니다.
내 접근 방식(Prototype 사용)은 onSubmit 양식 제출 버튼을 숨기고 "로드 중..."을 표시하는 다음 함수를 호출하는 양식에서 div.

function disableSubmit(id1, id2) {
    $(id1).style.display = 'none';
    $(id2).style.display = 'inline';
}

이 접근 방식에서 발견한 문제는 "로딩 중..."에서 애니메이션 gif를 사용하는 경우입니다. div, 로드는 잘 되지만 양식이 제출되는 동안에는 애니메이션이 적용되지 않습니다.

양식 결과가 (최종적으로) 로드되기를 기다리는 동안 디바운싱을 수행하고 페이지에 애니메이션을 계속 표시하는 더 좋은 방법이 있습니까?­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

도움이 되었습니까?

해결책

jQuery가 있으면 초기 제출 후 버튼을 비활성화하는 click() 이벤트를 첨부하세요.

$('input[type="submit"]').click(function(event){
 event.preventDefault();
 this.click(null);
});

그런 것.

다른 팁

Prototype을 사용하면 이 코드를 사용하여 양식이 제출되었는지 확인하고 제출 시 모든 제출 버튼을 비활성화할 수 있습니다.

document.observe( 'dom:loaded', function() { // when document is loaded
    $$( 'form' ).each( function( form ) { // find all FORM elements in the document
        form.observe( 'submit', function() {  // when any form is submitted
            $$( 'input[type="submit"]' ).invoke( 'disable' );  // disable all submit buttons
        } );
    } );
} );

이는 제출 버튼을 두 번 클릭하는 사용자에게 도움이 될 것입니다.그러나 다른 방법으로 양식을 제출하는 것은 가능합니다(예:텍스트 필드에서 Enter를 누르는 경우).이를 방지하려면 첫 번째 양식 제출 이후 모든 양식 제출을 감시하기 시작하고 중지해야 합니다.

document.observe( 'dom:loaded', function() {
    $$( 'form' ).each( function( form ) {
        form.observe( 'submit', function() {
            $$( 'input[type="submit"]' ).invoke( 'disable' );
            $$( 'form' ).observe( 'submit', function( evt ) { // once any form is submitted
                evt.stop(); // prevent any other form submission
            } );
        } );
    } );
} );

위의 모든 좋은 제안.당신이 말한 대로 정말로 "디바운스"하고 싶다면, 그에 대한 훌륭한 기능이 있습니다.자세한 내용은 unscriptable.com

var debounce = function (func, threshold, execAsap) {

    var timeout;

    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };

        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);

        timeout = setTimeout(delayed, threshold || 100); 
    };

}

단순히 스타일을 변경하는 대신 입력(type=submit) 요소에 "비활성화" 플래그를 설정해 볼 수 있습니다.그러면 브라우저 측에서 완전히 종료됩니다.

보다: http://www.prototypejs.org/api/form/element#method-disable

AJAX로 양식을 제출하면 GIF가 애니메이션으로 표시됩니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top