javascript - jQuery show() 方法不适用于 Chrome 和 IE 浏览器

Question

当后台任务正在进行一些处理时，我在我的网页上显示了一个进度加载器。我面临的问题是包含进度加载器的 div 在 Chrome 和 IE 浏览器上始终保持“显示:无”。但是它在 FF 和 Safari 上运行良好。

这是HTML

<div id="progressIndicatorBackground">
  <div id="progressIndicator">
    <img src="/cms/images/icons/progressIndicator.gif" alt="Loading...">
  </div>
</div>

CSS

#progressIndicatorBackground, #preLoaderBackground {
    display: none;
    height: auto;
    width: auto;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    z-index: 9000;
    position: fixed;
    background-color:rgba(0, 0, 0, 0.5);
}

显示和隐藏进度加载器的JS函数

function progressIndicator(value) {

    if(value) {
        $("#progressIndicatorBackground").show();
    }
    else {
        $("#progressIndicatorBackground").hide();
    }
}

我有好几次调用 progressIndicator 函数。例如在我调用函数的页面之一(这只是我在我的网络应用程序中使用的示例函数。还有其他函数以及我以相同方式调用 progressIndicator 函数的地方)

racingSubCategoryBindClick: function(id, parentId) {

        if ($('#'+id).css('display') != 'none') {
            $("#"+id).unbind();
            $("#"+id).live('click', function() {

                // Make all the rest of the group not active, not only this active
                $('.' + $(this).attr('class') +'.active').removeClass('active');
                $(this).addClass('active');

                progressIndicator(true);

                var menuId = $(this).parent().parent().attr('id'), day;
                if (menuId.indexOf(days.today) != -1) day = days.today
                else if (menuId.indexOf(days.tomorrow) != -1) day = days.tomorrow
                else day = days.upcoming;

                $.when(ajaxCalls.fetchEventsForCategory(id, parentId, day)).done(function (eventsMap) {

                    // There are no events
                    if (eventsMap.events.length == 0 || eventsMap.events[0].markets.length == 0) {
                        $('#mainError').show();
                        $('div.main').hide();
                    }

                    else {
                        $('#mainError').hide();

                        $('#'+id).addClass('active');

                        var events = eventsMap.events;

                        // If there are events
                        if (events.length > 0) {

                            var firstActive = racingNavigation.drawAllRaceNumbers(events);
                            racingNavigation.drawRaceView(events, firstActive);
                            // if 1st time and no next selections on the right
                            if ($('#tabaside').css('display') == 'none') racingNavigation.drawNextRaces(false, true, numberOfNextRaces);
                            $('.racing_nextraces').hide()
                        }
                        $('div.main').show();
                    }
                });

                $('.rightmain').show();
                $('#racing_home').hide();

                progressIndicator(false);
            });
        }
    },

当后台任务正在进行并且我正在获取 JSON 数据时，进度指示器在调用 progressIndicator(true) 后应该可见，并且一旦处理完成，显示属性应该设置为 none，因为我正在调用 progressIndicator( false) 一切都完成后。但是 progressIndicatorBackground 的状态永远不会设置显示:在 Chrome 和 IE 上阻止。

P.S -> 我正在使用最新版本或 Chrome 和 IE。

P.S.S -> 我已经尝试修改我的功能，但没有成功。该问题在 Chrome 和 IE 上仍然存在。

function progressIndicator(value) {

    if(value) {
        $("#progressIndicatorBackground").css("display", "block"); 
    }
    else {
        $("#progressIndicatorBackground").css("display", "none"); 
    }
}

Answer 1

主要问题是因为使用同步 AJAX 调用。它确实会卡住 Chrome 和 IE，并停止启动任何其他事件。

进度加载器不工作，因为它正在等待同步 ajax 调用完成加载事件。

原始 AJAX 调用

fetchEventsForCategory: function (categoryId, parentId, day) {

        var to = (date.getTo(day) == null) ? '' : '&to=' + date.getTo(day);

        return $.ajax({
            url: "/billfold-api/betting/events",
            type: "POST",
            data: 'scid=' + categoryId + '&pcid=' + parentId + '&from=' + date.getFrom(day) + to,
            dataType: "json",
            async: false,
        });
    },

修改后的 AJAX 调用成功回调

fetchEventsForCategory: function (categoryId, parentId, day) {
        var to = (date.getTo(day) == null) ? '' : '&to=' + date.getTo(day);

        return $.ajax({
            url: "/billfold-api/betting/events",
            type: "POST",
            data: 'scid=' + categoryId + '&pcid=' + parentId + '&from=' + date.getFrom(day) + to,
            dataType: "json",
            async: true,
            success: function(data) {
                progressIndicator(false);
            }
        });
    },

在我调用进度加载器的 JS 函数中。我删除了 progressIndicator(false);，而是将它放在我的 ajax 调用本身的成功函数下。