Question

我有一个ajax函数，我认为最好包含一个ajax旋转器来告诉最终用户实际发生的事情。这是我当前的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（加载程序）
  对象[div＃loader-popup]

所以我可以看到我的.removeClass()函数正在运行，但是，提交表单后检查页面将显示带有hidden类的元素。如果我在hidden标签中手动删除了inspector类，那么一切都会显示出来，所以我知道这不是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请求进行时立即将其重新添加。

要解决此问题，请在AJAX请求完成后将addClass()调用更改为。对于您而言，执行此操作的最佳位置是在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');
    }
  });
});

jQuery中奇怪的叠加显示问题

2 个答案: