Question

我确信这是某种时间问题，但我无法找到它的根源。一些背景我们有一个Web应用程序，可以通过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没有出现的任何想法？

Answer 1

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

如果警告导致微调器显示，那么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。

除非添加警报（或调试），否则页面内的jQuery显示会失败

1 个答案: