Question

我有一个调用AJAX的函数，它完成执行大约需要5秒钟。我有一个隐藏的微调器glyphicon，当用户点击按钮通过$(".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      
}

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

1 个答案: