为什么 hide() 和 show() 函数不能循环工作？

Question

我有这段 JS 代码，它遍历一个 div 并为每个 div 触发一个 ajax 调用。 ajax 调用运行良好。但我想在每个循环期间显示和隐藏“进度条”。

我的html代码是：

<div class="progress progress-striped active" id="waiting" style="display: none">
                <div style="width: 100%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="75" role="progressbar" class="progress-bar progress-bar-info">
                    <span class="sr-only">40% Complete (success)</span>
                </div>
            </div>

这个html代码很好（因为当我删除样式'display：none'时，我看到了进度条）。

我的JS代码是：

$('#btn_valider_paris').click(function() {
   
    var _token = $('meta[name="_token"]').attr( 'content' );
    var token_parieur = $('#token_parieur').val();
    
    // @todo : l'animation n'apparait pas , à creuser + tard.
    $('#waiting').show();
    
    $('#div_liste_questions').children('.form-inline').each(function() {
        
        // alert('id_question = '+$(this).data('id_question') + ' / ' + $(this).data('id_type_question')    ) ;
        var id_question = $(this).data('id_question');
        var id_type_question = $(this).data('id_type_question');
        var numeric_entier = $(this).find('.numeric_partie_entiere').val();
        var numeric_decimal = $(this).find('.numeric_partie_decimale').val();
        var text = $(this).find('.text').val();
        var match_score_equipe1 = $(this).find('.match_score_equipe1').val();
        var match_score_equipe2 = $(this).find('.match_score_equipe2').val();
        var liste_reponse = $(this).find('.liste_reponse').val();
      
        jQuery.ajax({
        url: $('#url_for_ajax').val() + '/post_enregistrer_pari_question_ajax',
        type: 'POST',
        dataType: 'json',
        data: {
                _token: _token, 
                token_parieur: token_parieur, 
                id_question: id_question, 
                id_type_question: id_type_question,
                numeric_entier: numeric_entier,
                numeric_decimal: numeric_decimal,
                text: text,
                match_score_equipe1:match_score_equipe1,
                match_score_equipe2:match_score_equipe2,
                liste_reponse:liste_reponse
            },
        success: function (data, textStatus, xhr) {
                      
                if(data.code_retour === -1){
                     toastr["error"](data.texte_retour);
                } 
        
            }
        });
                 
    });
    
    $('#waiting').show();
   
         
});

$('#waiting').show() 和 $('#waiting').hide() 根本没有任何效果。并且控制台中没有错误消息。

我的代码中这些 ajax 调用可能有什么问题？

Answer 1

要驱动进度温度计，您需要几个计数器和一些简单的逻辑。

以下是适合您的模式（删除了大量代码）：

$('#btn_valider_paris').click(function() {
    var _token = $('meta[name="_token"]').attr( 'content' );
    var token_parieur = $('#token_parieur').val();
    var ajaxCalls = { total:0, complete:0 }; // <<<<< initialize two counters
    $('#div_liste_questions').children('.form-inline').each(function() {
        // var ..., ... etc.
        jQuery.ajax({
            // etc, etc.
        }).then(function(data, textStatus, xhr) {
            if(data.code_retour === -1) {
                toastr.error(data.texte_retour);
            }
        }, function(xhr, textStatus, errorThrown) {
            console.log(textStatus || errorThrown);
        }).always(function() { // .always fires on both success and error.
            ajaxCalls.complete++; // <<<<< count ajax completions asynchronously, as the responses arrive.
            console.log(ajaxCalls.total, ajaxCalls.complete); 
            // Here, set progress thermometer to indicate that "ajaxCalls.complete of ajaxCalls.total" are complete.
            if(ajaxCalls.complete === ajaxCalls.total) {
                $('#waiting').hide(); // <<<<< hide #waiting when all calls are complete.
            }
        });
        ajaxCalls.total++; // <<<<< count ajax calls synchronously, as the calls are made.
    });
    if(ajaxCalls.total > 0) {
        // Here, initialise the progress thermometer to indicate that "0 of ajaxCalls.total" are complete.
        $('#waiting').show();
    } else {
        $('#waiting').hide();
    }
});

特别注意：

• ajaxCalls.total

  在

  .each()

  循环中同步递增
当响应到达时，

• ajaxCalls.complete

  异步递增。

Answer 2

可能是内联样式覆盖了它，为什么不在函数中设置状态？

您也可以使用

$('#waiting').css('display','none');
$('#waiting').css('display','block');

Answer 3

您可以使用 beforeSend 在每次调用之前显示该 div。

jQuery.ajax({
  url: $('#url_for_ajax').val() + '/post_enregistrer_pari_question_ajax',
  type: 'POST',
  dataType: 'json',
  beforeSend: function( xhr ) {
    $('#waiting').show();
  }
  data: {
     _token: _token, 
     token_parieur: token_parieur, 
     id_question: id_question, 
     id_type_question: id_type_question,
     numeric_entier: numeric_entier,
     numeric_decimal: numeric_decimal,
     text: text,
     match_score_equipe1:match_score_equipe1,
     match_score_equipe2:match_score_equipe2,
     liste_reponse:liste_reponse
    },
    success: function (data, textStatus, xhr) {

      if(data.code_retour === -1){
        toastr["error"](data.texte_retour);
      } 

    }
  });