在Javascript函數期間顯示微調器

Question

我有一個調用AJAX的函數，它需要大約5秒才能完成執行。我有一個隱藏的微調圖形顯示，當用戶點擊按鈕執行AJAX通過$(".glyphicon-refresh").removeClass("hidden")（隱藏是一個函數引導，並且工作正常，它顯示輪子旋轉。但是，我希望當功能完成輪子應該隱藏起來，但是，如果我在函數的末尾添加了隱藏的類，或者如果我在jQuery中使用了.hide（），那麼紡紗輪永遠不會顯示出來。出現了JavaScript函數的時間我搜索，只發現要求對某些框架，如MeteorJS問題，但不只是普通的代碼

編輯：？

下面是代碼的一部分，我我跑了寧：

$(document).ready(function() { 
    var cont = " .continue-btn"; 
    $("#section-one" + cont).click({id: "#section-one", next: "#section-two"}, submitSection); 
    $("#section-two" + cont).click({id: "#section-two", next: "#section-three"}, submitSection); 
}); 

function submitSection(event) { 
    $(event.data.id + " .glyphicon-refresh").removeClass("hidden"); 
    var there_are_errors = false; 
    var radio_element = ''; 
    var form = event.data.id + ' form'; 
    $(form + ' input, ' + form + ' select, ' + form + ' radio, ' + form + ' number').each(
     function(i) { 
      var input = $(this); 
      if (input.is(':radio')) { 
       if (this.checked) { 
        //continue 
       } else if (radio_element != this.name) { 
        radio_element = this.name; 
        //continue 
       } else { 
        there_are_errors = false 
        return false; 
       } 
      } 

      if (typeof(input.attr('class')) == "string" && input.attr('class').indexOf('required') !== -1 && input.val() == '') { 
       there_are_errors = false 
       return false; 
      } 
     } 
    ); 
    if (there_are_errors) { 
     $(event.data.id + " .glyphicon-refresh").addClass("hidden"); 
     return false; 
    } 
    else { 
     $.ajax({ 
      url: '/ajax/form', 
      type: 'POST', 
      data: $(form).serialize(), 
      success: function(data) { 
       $(err).removeClass('error-message').text(""); 
       $(event.data.next + " .section-header").removeClass('disabled').trigger('click'); 
       if (typeof event.data.submit !== 'undefined') { 
        $("#submit-message p").addClass("submit-message").text(data); 
       } 
      }, 
      failure: function(error) { 
       $(err).addClass('error-message').text("An error occurred while processing your information."); 
       $("html, body").animate({scrollTop: $(event.data.id).offset().top}, 250); 
      } 
     }); 
     $(event.data.id + " .glyphicon-refresh").addClass("hidden"); 
     return true; 
    } 
} 

Answer 1

首先 - 你應該已經發布你的代碼。 林假設你只是在做這樣的事情：

function getData() { 
    $(".glyphicon-refresh").removeClass("hidden"); // show spinner 
    $.ajax(...); // make ajax call 
    $(".glyphicon-refresh").addClass("hidden"); // hide spinner 
} 

這將顯示微調，並立即將其隱藏，而無需等待AJAX​​函數返回，因爲$阿賈克斯是異步。 你應該這樣做：

function getData() { 
    $(".glyphicon-refresh").removeClass("hidden"); // show spinner 
    $.ajax(...).always(function() { // .always() will be called after 
            // ajax request finished 
            //(failed or success - doesnt matter) 
    $(".glyphicon-refresh").addClass("hidden"); // hide spinner 
    }); // make ajax call  
}