Question

我有一个带有表单的设置页面。我注意到人们经常忘记点击保存按钮，因此我决定在$.ajax()上发送window.onbeforeunload的POST请求。我还想在发送请求之前显示一个加载器（来自Semantic UI），并在完成后隐藏。

这就是我所拥有的：

function save(e) {
  var msg = 'Your settings were not saved. Please do not leave yet so we can try saving again';
  $('form').dimmer('show');

  var xhr = $.ajax('settings.php', {type: "POST", 
    data: $('form').serialize(), async: false});

  $('form').dimmer('hide');

  if (xhr.status !== 200){
    $('form').submit(); //will trigger if the user stays
    if (e)
      return e.returnValue = msg;
  }
}

if ('onbeforeunload' in window)
  window.onbeforeunload = save;
else if ('onunload' in window)
  window.onunload = save;
else {
  var button = $('noscript.submitParent').text();
  $('.ui.form.segment').append(button);
}

但是现在，在请求完成之前，加载器不会显示。我怀疑这是因为async: false，这是必要的，以便页面不会卸载。

有关如何在发送请求之前显示加载程序的任何建议？有可能吗？
我尝试here中的$(window).trigger('resize')和$('form .dimmer').height() here的想法，但没有效果。

我知道localStorage alternative，但如果可能，我不想使用它。

我使用jQuery 2.1.1

显示加载程序并发布AJAX onbeforeunload

0 个答案: