0

これはある種のタイミングの問題だと確信していますが、その根本にたどり着くことができません。いくつかの背景 JavaScript を介してデータを読み込んで変更する Web アプリがあります (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 の最終的な状態のみが表示されることは珍しくありません。

アラートによってスピナーが表示される場合は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 に答える