jQuery中奇怪的覆盖显示问题

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输出。

第一个控制台.log(覆盖)
对象 [div#overlay.hidden ]

第二控制台.log(加载器)
对象 [div#loader-popup.hidden ]

第三控制台.log(叠加)
对象 [div#覆盖 ]

第四控制台.log(装载机)
对象 [div#loader-popup ]

所以我可以看到我的.removeClass()功能正在工作，但是，提交表单后检查我的页面会显示带有hidden类的元素。如果我在inspector选项卡中手动删除该hidden类，则所有内容都会显示，因此我知道这不是CSS问题。

你可以在这里看到这种情况发生在一个更简单的规模上

我也尝试过.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');
}
});
});