在 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