在 function 調用 jquery 時顯示一個 div

Question

我想在checkCoupon觸發時顯示 #LoadingDiv，並在它完成時讓它消失，以顯示 function 正在進行中。 checkCoupon由單擊按鈕觸發（未顯示）。

我嘗試了多種方法，包括創建另一個 function 以包含在onclick事件中，我將其放在 ajax 調用的不同部分，並嘗試以不同方式更改 CSS。 它仍然無法正常工作。

知道如何獲得此功能並在通話開始時正確顯示嗎？

 function checkCoupon() { var coupon = document.getElementById('couponCode').value; var coupon_v = false; $('#LoadingDiv').css('display', 'block'); $.ajax({ type: 'post', url: 'coupon.php', async: false, data: { 'coupon': coupon }, success: function(data) { if (data;= "empty") { coupon_v = data; } } }) }

 <div id="LoadingDiv" style="display:none;">One Moment Please...<br /> <img src="images/progressbar.gif" class="displayed" alt="" /> </div>

Answer 1

您可以隱藏 ajax complete函數上的 div，該函數在請求完成時調用（在執行成功或錯誤回調之后）：

complete: function(){
  $('#LoadingDiv').hide();
}

Answer 2

您可以使用 jQuery 的beforeSend和complete方法來處理調用前后的狀態：

 function checkCoupon() { var coupon = document.querySelector('#couponCode').value; var coupon_v = false; let $loading = $('#LoadingDiv'); $.ajax({ type: 'post', url: '.', //coupon.php async: false, data: { 'coupon': coupon }, beforeSend: function() { $loading.removeClass('hide') }, success: function(data) { if (data != "empty") { coupon_v = data; } }, complete: function() { // timeout only used for demo effect window.setTimeout(function() { $loading.addClass('hide') }, 1500) } }) }

 .hide { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="LoadingDiv" class="hide">One Moment Please...<br /> <img src="images/progressbar.gif" class="displayed" alt="" /> </div> <input type="hidden" id="couponCode" value="3" /> <button onclick="checkCoupon()">Click</button>

Answer 3

我遇到過同樣的問題。 我知道現在這是一個較老的問題，但顯然仍然與我遇到同樣的難題有關。

我會調用showLoadingOverlay()方法，這將使加載 div 可見，然后運行我想運行的 function，然后隱藏加載疊加層，但疊加層永遠不會顯示。 我終於發現問題是我在顯示加載覆蓋后執行的 function 發生得太快，它會暫停顯示覆蓋的過程直到它完成，然后覆蓋上的隱藏 function 被調用得太快當顯示方法能夠恢復時。 這就是為什么看起來什么都沒有發生的原因。

因此，您需要延遲您嘗試調用的 function（我使用了setTimeout()方法）。 setTimeout()方法中的 400 是在執行processFunction方法之前將延遲 400 毫秒。 這是實現目標的通用方法：

Javascript：

/******************************************************************************************
 * Toggle loading overlay.
 * ***************************************************************************************/

/**
 * Toggle the loading overlay in order to prevent the user from performing any actions.
 * The processFunction must call the endLoadOverlay method once it is finished.
 * @param {any} processFunction The process to perform while the loading screen is active.
 * This method must call the endLoadOverlay method once it is done.
 */
function startLoadOverlay(processFunction) {
    $('#overlay').css('display', '');
    setTimeout(processFunction, 400);
}

/**
 * Ends the loading overlay.
 * */
function endLoadOverlay() {
    $('#overlay').css('display', 'none');
}


/******************************************************************************************
 * End of toggle loading overlay.
 * ***************************************************************************************/

然后，當您調用 startLoadOverlay() 方法時，將您想要完成的方法傳遞給它。 在我的示例中，我有一個按鈕單擊事件調用覆蓋方法：

HTML：

<button id="btnDoAction" type="button" onclick="startLoadOverlay(myFunctionToAccomplish);">Accomplish Something</button>

請記住， myFunctionToAccomplish()是我希望在疊加層可見時執行的方法。 注意：傳遞給 startLoadOverlay() 方法的方法必須在完成處理后調用endLoadOverlay()方法，以便隱藏加載覆蓋。 所以：

Javascript

function myFunctionToAccomplish() {
    // Perform functionality.
    //TODO:  Add whatever functionality here.

    // Once I'm done I need to call the endLoadOverlay() method in order to hide the loading overlay.
    endLoadOverlay();
}

如果您對我的$('#overlay')元素感到好奇。 思路基本出自這里： https://www.w3schools.com/howto/howto_css_overlay.asp