时间戳

首页 > 解决方案 > 如何检查函数是否已完全执行并将完成标志存储在 JavaScript 的全局变量中

javascript - 如何检查函数是否已完全执行并将完成标志存储在 JavaScript 的全局变量中

问题描述

当用户点击Break按钮时，它会执行Break()JS 中的函数。然后它会在使用 CSS之后调用getData()2 行代码。getData但是，如果您看到 2 个btnLock用于隐藏lock.png和btnUnlock显示的 CSS unlock.png。它没有等待getData()完成，这 2 个 CSS 被我们在buildTable(). 所以我正在寻找的选项是先构建数据表medTable.draw()，然后检查是否Break()已完成。如果是这样，那么使用这 2 个 CSS 来隐藏和显示。

所以为此，我想使用全局布尔变量来存储 Break 函数的状态。我的意思是它是否完成，以便我可以在medTable.draw();检查 Break 功能完成后使用它。

指数

<div id="breakDialog" style="display: none;">
  <fieldset class="bd">      
    <div class="label"><label for="OverrideReason">Reason <em>*</em></label></div>              
     <option value="other">
       Other
     </option>                   
   </div>
  </div>       
   <div class="value">
    <textarea id="OverrideComment" style="width: 400px; height: 100px;"></textarea>
    </div>    
 </div>
    <div class="ft">
        <span class="yui-primary-button yui-push-button" id="override-button"><span class="first-child"><button tabindex="0" id="override-button-button" type="button" onClick="break();">Break </button></span></span>     
    </div>
</div>
 <table style="border: none; padding-bottom: 20px;">
    <tr>
     <td nowrap="nowrap" style="padding-top: 2px;">                                    
         <p><span id="btnUnlock" style="display: none; font-family: arial"><input type="image" src="~/icons/unlock.png" alt="unlock" width="20" height="20" />Unlocked.</span></p>
           <p><span id="btnLock" style="display: none; font-family: arial"><input type="image" src="~/icons/lock.png" alt="lock" width="20" height="20" />Locked</span></p>
            </td>
           </tr>
  </table>

JavaScript

function break() { 
    if (validatePrivacyDialog()) {
        $.ajax({
            type: "POST",
            url:breakUrl,
            data: JSON.stringify({
                reason: $('#OverrideReason').val(),
                comment: $('#OverrideComment').val()
            }),
            success: function () {
                var jsStartDate = moment($("#startDatePicker").val(), momentStartDateFormat).toDate();
                var jsEndDate = moment($("#endDatePicker").val(), momentEndDateFormat).toDate();
                getData(jsStartDate, jsEndDate);
                $("#breakDialog").dialog('close');
                $("#btnLock").css("display", "none");
                $("#btnUnlock").css("display", "block");

            },
            contentType: "application/json"
        });
    }
}
////////////////////////////////////

function getData(startDate, endDate) {
     medTable.clear().draw();
     ...
         }).done(function (data) {
        
                      if (medArray != null & medArray.length > 0) {
                        if (requestsProcessed === pageData.Number) {                        
                            buildTable(medTable, medicationArray);
                        }
                    }
                }
                
    ///////////////////////////////////////

function buildTable(medTable, medData) {

    var dataLength = medData.length;
    for (var key = 0; key < dataLength; key++) {
        totalMedCount = totalMedCount + 1;
        var med = medData[key];

        var iconHTML = "<input class='cssUnlock' type='image' src='" + pathPrefix + "icons/information.png' alt='defaultInfo' width='20' height='20'></input>";
        if (med.BlnFlag)
            iconHTML = "<input class='cssUnlock' type='image' src='" + pathPrefix + "icons/information-red.png' alt='redInfo' width='20' height='20'></input>";
        if (med.Lock === "Yes") {
            iconHTML = "<input class='cssLock' type='image' src='" + pathPrefix + "icons/lock.png' alt='defaultLock' width='20' height='20'></input>";
            if (med.BlnFlag)
                iconHTML = "<input class='cssLock' type='image' src='" + pathPrefix + "icons/lock-red.png' alt='redLock' width='20' height='20'></input>";
            $("#btnLock").css("display", "block");
        }
        else {
            if (med.ViewConsent === "No") {
                $("#btnUnlock").css("display", "block");
                iconHTML = "<input class='cssUnlock' type='image' src='" + pathPrefix + "icons/unlock.png' alt='defaultUnlock' width='20' height='20'></input>";
                if (med.BlnFlag)
                    iconHTML = "<input class='cssUnlock' type='image' src='" + pathPrefix + "icons/unlock-red.png' alt='redUnlock' width='20' height='20'></input>";
            }
        }

        var blnViewConsent = (ViewConsent === "Yes") ? "Yes" : "No";
        medTable.row.add([
            med.Id,          
            med.Lock == "Yes" ? "" : med.DispenseTotal,
            "<a>" + med.ItemStatus + "</a>",
            med.MedTableHtml,          
            blnViewConsent,
            med.MedTableHtml,
            medicationUrl,           
            iconHTML
        ]);

    }

    medTable.draw();
    $("#totalItemsElement").text(totalMedicationCount);

}

标签： javascriptasp.net-core

解决方案

如果你想确定

$("#btnLock").css("display", "none");
$("#btnUnlock").css("display", "block");

不会被 .中的 css 覆盖。buildTable()您可以像这样更改 getData：

function getData(startDate, endDate) {
     medTable.clear().draw();
     ...
         }).done(function (data) {
        
                      if (medArray != null & medArray.length > 0) {
                        if (requestsProcessed === pageData.Number) {                        
                            buildTable(medTable, medicationArray);
                            $("#btnLock").css("display", "none");
                            $("#btnUnlock").css("display", "block");
                        }
                    }
                }

之后buildTable(medTable, medicationArray);，它将更改 css。因此，即使 css inBreak()将被覆盖，css ingetData()也不会。

推荐阅读