0

我确信这是某种时间问题，但我无法找到它的根源。一些背景我们有一个网络应用程序，它通过 javascript 加载和更改数据（没有 ajax 调用，所有数据都是页面本地的）。我们正在开发移动版本，当然渲染页面需要更长的时间，因此我们正在尝试添加“正在加载，请稍候”图像，而这些东西在幕后渲染。我添加了 div 元素，它在初始页面加载时工作正常，但是当用户更改屏幕时，加载 div 不会显示，除非我在显示后立即发出警报或调试正在逐步执行的操作。

这是部分代码

function showSpinner() {
   // if already being shown why show again
   if (!spinnerOn)
   {
      $("#loading").show();
      spinnerOn = true;
      //alert("loading div should be visible");
   }
}

function closeSpinner() {
    spinnerOn = false;
    $("#loading").hide();
}

如果我将该警报放回 showSpinner 函数中，则会显示 div，否则不会显示。

该函数作为另一个函数的一部分调用（由 onClick 触发）

showSpinner();
navObj.setCurrTabID(tabID);
tabObj = navObj.getCurrTabObjects();
$.each(tabObj, function (index) {
    currID = "#" + index;
    if (index == tabID) {
       $(currID).addClass("active");
       $(currID).removeClass("inactive");
    }
    else {
       $(currID).addClass("inactive");
       $(currID).removeClass("active");
    }
});

displayMainDataSection(NO_CHANGE);

这是 displayMainDataSection（还有很多其他代码）

function displayMainDataSection(initLevel)
{

    $("#notes-table").hide();
    $("#bubbleCaps").hide();
    $("#equiGraph-middle").hide();
    $("#pieSection").hide();
    $("#descBox").hide();
    $("#raceSection").hide();
    $("#horseNotesDisplay").hide();
    $("#gridDesc").empty();
    $("#horseLegend").hide();
    $("#playerChoices").hide();
    $("#graphChoices").hide();
    $("#pieButtonSetDiv").hide();
    $("#spdButtonSetDiv").hide();
    $("#statsTableReg").empty();
    $("#raceListDiv").hide();

    hideMessages();
    hideBigOrSmallDivs();
    resetMargins();
    if (hammer) {
        setHammer();
    }



    switch (navObj.currScreen) {
         case 'notes':
            // Display the NOTES data screen
            clearDataSectionDivs("");
            displayNotesScreen();
            $("#notes-table").show();
            break;
       case 'raceSummary':
            // Display the Race Summary Screen
            if (!isSmallScreen) {
                $("#equiGraph-middle").show();
                $("#gridDesc").html(raceListDescText);
            }
            else {
                // remove the header bottom margin for the the race list and the horse list
                $(".equiGraph-model").css("margin-bottom", "0px");
            }
            showRegTableDiv();
            displayRaceSumMiddleSection();
            // show the Static table ("Reg"), not one controlled by a "show grid" button
            displayTableTitleLine("Reg");
            displayTableSection(navObj.getDefaultTableID(), "Reg");
            break;
       case 'bubbleCap':
            // Display the Bubble Capper Screen
            $("#bubbleCaps").show();
            showGridTableDiv();
            displayMiddleSection();
            clearDataSectionDivs();
            displayTableTitleLine("");
            displayTableSection(navObj.getDefaultTableID(), "");
            displayBubbleGraphs(initLevel, navObj.getDefaultBubCapDisplay());
            break;
       case 'speed':
            // Display the Speed/Class Screen
            showGridTableDiv();
            displayMiddleSection();
            $("#gridDesc").html(raceGraphDescText);
            displayTableTitleLine("");
            displayTableSection(navObj.getDefaultTableID(), "");
            changeSpdClsGraphType(navObj.getDefaultSpdClsGraph());
            //showGridDialog();
            break;
       case 'playerPie':
            // Display the Player Pie Screen
            showGridTableDiv();
            displayMiddleSection();
            $("#pieSection").show();
            changePieChartSection(navObj.getDefaultGraphCol(), navObj.getDefaultGraphType());
            displayTableTitleLine("");
            displayTableSection(navObj.getDefaultTableID());
            break;
      default:  //signals
            showRegTableDiv();
            displayMiddleSection();
            // show the Static table, not one controlled by "show grid" button
            displayTableSection(navObj.getDefaultTableID(), "Reg");
            break;
    }
    return;
}

它实际上可以从几个位置调用，然后 displayMainDataSection 的末尾调用 closeSpinner 函数再次隐藏 div。

关于为什么 div 不显示的任何想法？

4

1 回答 1

3

同步代码在完成时只看到 DOM 的 nett 状态，而不是中间状态，这种情况并不少见。

如果警报导致微调器显示，那么 a setTimeout() 也应该显示，如下所示：

showSpinner();
setTimeout(function() {
    navObj.setCurrTabID(tabID);
    var tabObj = navObj.getCurrTabObjects();
    clss = ["inactive", "active"];
    $.each(tabObj, function(index) {
        $("#" + index).addClass(clss[+(index == tabID)]).removeClass(clss[+(index !== tabID)]);
    });
    displayMainDataSection(NO_CHANGE);
}, 0);

如果仍然没有显示，请尝试将超时延迟增加到例如。100。

于 2013-06-05T20:47:45.013 回答