jQuery.validate의 form.valid()가 애니메이션 버튼을 표시하지 못하도록합니다. JavaScript UI 스레드를 차단합니다.

Question

지금 입력 항목이 많고 (~ 500 입력) 큰/큰 양식에 Save 버튼이 있습니다. 이 입력은 AJAX를 통해로드되며 그 중 큰 부분은 숨겨진 입력입니다. Save 버튼을 클릭하면

내가 전화 :

// Save button click 
$("#save").click(function() 
{ 
    var button = $(this); 

    button.button('loading'); 

    if($("form").valid()) 
    { 
     ... AJAX Post here ... 
    } 
    else 
    { 
     button.button('reset'); 
    } 
} 

문제는 $("form").valid()는 UI 스레드가 꽤 많이 사용하고 차단하기 때문에 Twitter Bootstrap button에서 제공하는 Loading 애니메이션이 실행되지 것입니다. 나는 그것을 호출하여 $("form").valid() 호출을 제거하고 로딩 애니메이션이 예상대로 표시되는지 테스트했습니다.

양식을 처리하는 동안 Loading 애니메이션을보고 싶습니다. 코드가 $("form").valid()을 넘었을 때 애니메이션이 깜박입니다 ... 사용자가 간신히 볼 수 있습니다.

valid() 함수가 작동하는 동안 jQuery 유효성 검사 중에 Loading 버튼을 얼마 동안 사용할 수 있습니까?

Answer 1

내가 ... 다른 방법으로 문제를 해결하기 위해

대신 입력 필드 수백 전체 양식 (시간이 소요되는 프로세스) 유효성 검사를 관리, 나는 만 수정 된 필드을 확인 즉 $("form").validate().element(this)으로 전화를합니다. 여기서 this은 사용자가 값을 수정 한 입력 요소입니다.

// Save button click 
$("#save").click(function() 
{ 
    var button = $(this); 

    button.button('loading'); 

    // Selecting only Questions that had their answers modified... 
    var answers = // Your logic here to select the modified input fields 

    var valid = true;   

    answers.each(function() 
    { 
     $(this).find("textarea:not(:disabled)").each(function() 
     { 
      if (!$("form").validate().element(this)) 
      { 
       $(this).focus(); 

       valid = false; 

       return; 
      } 
     }); 
    }); 

    // If any of the answers is invalid return with validation messages... 
    if (!valid) 
    { 
     // Resetting Bootstrap's button back to it's original state 
     button.button('reset'); 

     return; 
    } 

    ... // Do the AJAX POST here 
}