jQuery中奇怪的叠加显示问题[重复]

Question

我有一个 ajax 函数，并认为包含一个小的 ajax-spinner 来告诉最终用户某些事情正在实际发生会很好。这是我当前的 jQuery 函数：

$('#contact-form').submit(function(e)
{
    e.preventDefault();

    let overlay = $('#overlay'),
        loader = $('#loader-popup');

    console.log(overlay);
    console.log(loader);

    console.log('===================');

    //show overlay
    overlay.removeClass('hidden');
    loader.removeClass('hidden');

    console.log(overlay);
    console.log(loader);

    let formData = new FormData($(this)[0]),
        params = [];

    $.ajax({
        data: formData,
        type: 'post',
        url: '/pages/contact-us/action/send.php',
        cache: false,
        contentType: false,
        processData: false,
        success: function(res)
        {
            if (res == 1) {
                params['type'] = 1;
                params['msg'] = 'We will be with you as soon as we can!'
            } else {
                try {
                    res = $.parseJSON(res);
                    let data = [];

                    $.each(res, function(key, value) {data.push(value)});

                    params['type'] = 2;
                    params['msg'] = data.join('<br />')
                } catch(e) {
                    console.log(e);
                    alert('Huh. that\'s weird, something went wrong! Please try again');

                    //cause syntax error to stop script working
                    die()
                }
            }

            validator.displayAlert(params['type'], params['msg'])
        },
        error: function(res)
        {
            console.log(res);
            alert('Don\'t worry.. it\'s not you, it\'s us.')
        }
    });

    //hide overlay
    overlay.addClass('hidden');
    loader.addClass('hidden');
});

但奇怪的是覆盖没有显示，加载程序也没有。 console.log 输出是什么让这有点难以调试和理解。

第一个 console.log（覆盖）
对象 [ div#overlay.hidden ]

第二个 console.log(loader)
对象 [ div#loader-popup.hidden ]

第三个 console.log（覆盖）
对象 [div#overlay]

第四个 console.log(loader)
对象 [ div#loader-popup ]

所以我可以看到我的.removeClass() 函数正在工作，但是，一旦提交表单，检查我的页面会显示带有hidden 类的元素。如果我手动删除 inspector 选项卡中的 hidden 类，那么一切都会显示，所以我知道这不是 CSS 问题。

您可以在更简单的范围内看到这种情况here

我也尝试过.toggle()，但无济于事。

我什至如何开始调试似乎在幕后工作但不在屏幕上的东西？

Answer 1

您应该在回调中调用隐藏叠加层，因为它将异步执行。

类似

try {
    res = $.parseJSON(res);
    let data = [];

    $.each(res, function(key, value) {
        data.push(value)
    });

    params['type'] = 2;
    params['msg'] = data.join('<br />')
} catch (e) {
    console.log(e);
    alert('Huh. that\'s weird, something went wrong! Please try again');

    //cause syntax error to stop script working
    die()
} finally {
    //hide overlay


    overlay.addClass('hidden');
    loader.addClass('hidden');
}

Answer 2

$.ajax() 调用中的逻辑是异步的。因此，您删除该类，然后在 AJAX 请求正在进行时立即将其重新添加。

要解决此问题，请将 addClass() 调用更改为在 AJAX 请求完成后。在您的情况下，执行此操作的最佳位置是在 complete 回调中，因为无论 AJAX 请求是否成功完成或出现错误，它都会触发：

$('#contact-form').submit(function(e) {
  e.preventDefault();

  let $overlays = $('#overlay, #loader-popup').removeClass('hidden');
  let formData = new FormData(this),
    params = [];

  $.ajax({
    // ajax settings...
    complete: function() {
      $overlays.addClass('hidden');
    }
  });
});