除非添加警报（或调试），否则页面内的jQuery显示会失败
我确信这是某种时间问题，但我无法找到它的根源。 一些背景我们有一个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没有出现的任何想法？
同步代码在完成时只看到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。