在Javascript函数的持续时间内显示微调器

Question

我有一个调用AJAX的函数,它完成执行大约需要5秒钟.我有一个隐藏的微调器glyphicon,当用户点击按钮执行AJAX时显示$(".glyphicon-refresh").removeClass("hidden")(隐藏是一个功能在bootstrap中,并且工作正常,它显示车轮旋转.但是,我希望当功能完成车轮应该再次隐藏.但是,如果我在函数的末尾添加隐藏的类或者如果我在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函数返回,因为$ .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      
}