Question

我有一个结帐页面，其中包含一些ajax调用，用于在用户更改交付国家时更新隐藏字段。

大多数情况下，这很好用，页面有时间在用户点击提交之前更新隐藏字段。有些时候，由于连接速度慢或者ajax没有及时返回隐藏字段而且允许用户提交不完整的表单。

在这里阅读了另一个问题之后，我使用ajaxStart和ajaxComplete来禁用并重新启用表单的提交按钮。

我还想在按钮旁边显示“请稍候”消息，以便让用户了解正在发生的事情。

这一切都很好，但在99％的情况下，这条消息闪烁并快速消失，读取速度太快，看起来分散注意力/错误。

我想做的只是显示此消息，如果ajax调用需要很长时间才能响应（表示我们的连接速度很慢） - 比如250ms？

我以前没有在jquery中使用计时器，所以这有助于我掌握所涉及的概念。

这是迄今为止的功能

// if we're waiting for any ajax to complete we need to disable the submit
$(document).ajaxStart(function() {
  $(".ajaxbutton").attr("disabled", "disabled");
  // if it's taken longer than 250ms (say) display waiting message
      $('#processingAlert').html(' ...please wait one moment');
      $('#processingAlert').show();
      // end the if here
})
$(document).ajaxComplete(function() {
  $(".ajaxbutton").removeAttr("disabled");
    $('#processingAlert').hide();
});

我知道这是一个非常基本的问题，我可以在PHP中轻松完成，但我是jquery的新手所以我需要一些初学者的帮助！

谢谢！

Answer 1

setTimeout在这里是你的朋友。

下面的内容应该有效，尽管我还没有测试过错字等等。

// if we're waiting for any ajax to complete we need to disable the submit
$(document).ajaxStart(function() {
  $(".ajaxbutton").attr("disabled", "disabled");
  // if it's taken longer than 250ms (say) display waiting message
  timer = setTimeout(function() {
    $('#processingAlert').html(' ...please wait one moment');
    $('#processingAlert').show();
  }, 250);
})
$(document).ajaxComplete(function() {
  $(".ajaxbutton").removeAttr("disabled");
    $('#processingAlert').hide();
    // cancel showing the message when the ajax call completes.
    clearTimeout(timer);
});

Answer 2

尝试：

function hideAlert() {
  $('#processingAlert').hide();
}

$(document).ajaxComplete(function() {
  $(".ajaxbutton").removeAttr("disabled");
  setTimeout(hideAlert, 1000); // or whatever delay you feel is appopriate, in ms
});

请参阅http://www.w3schools.com/js/js_timing.asp

另外，我建议你看看非常漂亮的blockUI插件。这将允许你做这样的事情：

$.blockUI.defaults.fadeOut = 1000;
$.blockUI.defaults.message = '<h3>...please wait one moment</h3>';

$(document).ajaxStart(function() {
    $(".ajaxbutton").attr("disabled", "disabled");
    $.blockUI;
}).ajaxComplete(function() {
    $(".ajaxbutton").removeAttr("disabled");
    $.unblockUI
});

如何在经过一定时间后才显示消息jquery - 阻止表单提交

2 个答案: