Jsコードは、クリックイベントの後に最初の行をスキップします

Question

私の次のコードによると、「処理中」は最初に追加されず、代わりに直接「保存中」に追加されます。私はこれを解決しようとしましたが、私のコードで何が間違っているのではなく、最初に "Processing"行をスキップしていません。

$('#ac_submit,#save_as_draft').click(function (e) { 

     $('#save_as_draft').append('<i class="fa fa-refresh fa-spin"></i> Processing'); 
     $('form').find('.invalid_field').removeClass('invalid_field'); 
     var validation_status = 0; 
     $('#mandate_field').empty(); 
     $('input,textarea,select').filter('[required]').each(function(){ 
      if($(this).filter('[required]').val() == ''){ 
//    console.log($(this).filter('[required]').attr('name')); 
       $(this).closest('.form-group').addClass(' has-error has-danger'); 
       $('#ac_submit').removeClass('disabled'); 
       $('#save_as_draft').removeClass('disabled'); 
       if($(this).closest('.hide_devices').hasClass('show_panel') == true){ 
        $('#panel').addClass('invalid_field'); 
        var matched_li = $(this).closest('div[id^="tab_"]').attr('id'); 
        $('li a[href="#'+matched_li+'"]').addClass('invalid_field'); 
       } else {  
        var divId = $(this).closest('.hide_devices').attr('id'); 
        $('li a[div-id="'+divId+'"]').addClass('invalid_field') 
        var action_on_li = divId.replace(/\d+/g, '') 
        if(action_on_li == 'cloneModBusInput'){ 
         $('#mod__bus').addClass('invalid_field') 
        } 
        if(action_on_li == 'cloneSensorInput'){ 
         $('#sen__sor').addClass('invalid_field') 
        } 
        if(action_on_li == 'clonedRelayInput'){ 
         $('#re__lay').addClass('invalid_field') 
        } 
       } 
       $('#mandate_field').empty().html('* Mandatory fields are missing'); 
       validation_status = 1; 
       $(this).addClass('disabled'); 
       $(this).html('<i class="fa fa-save"></i> '+$(this).text()+''); 
       e.preventDefault(); 
      } 
     }); 
     if(validation_status == 0){ 
      $('#mandate_field').empty(); 
      $(this).addClass('disabled'); 
      $(this).html('<i class="fa fa-refresh fa-spin"></i> Saving'); 
     } else { 
      $(this).addClass('disabled'); 
      $(this).html('<i class="fa fa-save"></i> '+$(this).text()+''); 
     } 
    }); 

上記のコードで何が間違っているのかを教えてください。

Answer 1

あなたのコードでは、同期的に実行されます。あなたがするのは、コンテナに要素を追加することです。同じ要素のHTMLコンテンツ全体を新しいコンテンツで置き換えます。結果は、あなたが何と言おうとしているのかです。

あなたは約0.5秒間以前の内容を確認したい場合は次のようにします

var self = this; 

setTimeout(function() { 
    if (validation_status == 0) { 
     $('#mandate_field').empty(); 
     $(self).addClass('disabled'); 
     $(self).html('<i class="fa fa-refresh fa-spin"></i> Saving'); 
    } 
}, 500); 

Answer 2

あなたの "処理" を上書きするためです：

ここ

$('#save_as_draft').append('<i class="fa fa-refresh fa-spin"></i> Processing'); 

：

$(this).html('<i class="fa fa-refresh fa-spin"></i> Saving');