除非添加警报(或调试)，否则页面内的jQuery显示失败 [英] jQuery show within page fails unless alert is added (or debug)

问题描述

我确定这是某种计时问题，但我无法找到问题的根源. 一些背景 我们有一个网络应用程序，可通过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为什么不显示的任何想法?

解决方案

在同步代码中，仅看到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.

I am sure this is a timing issue of some sort but I can't get to the root of it. Some background We have a web app which loads and changes data via javascript (no ajax calls, all data is local to the page). We are working on the mobile version and of course it takes longer to render the pages so we are trying to add a "loading, please wait" image while the stuff renders behind the scenes. I have the div element added and it works fine on initial page load but when the user changes screens the loading div does not show up unless I either put in an alert right after the show or debug things stepping through.

Here is part of the code

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();
}

If I put that alert back in the showSpinner function div shows up, if not it doesn't.

The function is called as part of another function (triggered by an 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);

Here is the displayMainDataSection (there is a lot of other code as well)

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;
}

It actually can be called from a couple of spots and then the end of displayMainDataSection calls the closeSpinner function to hide the div again.

Any thoughts on why the div doesn't show up?

解决方案

It's not uncommon with synchronous code to see only the nett state of the DOM, on completion, not intermediate states.

If an alert causes the spinner to show, then so should a setTimeout(), something like this :

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);

If it still doesn't show, then try increasing the timeout delay to eg. 100.

这篇关于除非添加警报(或调试)，否则页面内的jQuery显示失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！