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

Question

我有一个调用 AJAX 的函数，它大约需要 5 秒才能完成执行。我有一个隐藏的旋转器字形图标，当用户单击按钮以通过 $(".glyphicon-refresh").removeClass("hidden") 执行 AJAX 时显示(隐藏是 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      
}