如何显示消息仅当一定量的时间已经过去的jquery - prevent表单提交 [英] How do I display a message only if a certain amount of time has elapsed jquery - prevent form submission

问题描述

我有一个结账网页，其中有一些Ajax调用更新隐藏字段，当用户更改送货国家的实例。

I've got a checkout page which has some ajax calls that update hidden fields when the user changes delivery country for instance.

在大多数情况下，这工作正常，页面有时间来更新隐藏字段用户点击提交之前。在某些时候，虽然，由于缓慢连接或任何AJAX不返回在时间上隐藏字段和允许用户提交一个不完整的形式

Most of the time, this works fine, the page has time to update hidden fields before the user clicks submit. Some of the time though, due to slow connection or whatever the ajax doesn't return the hidden fields in time and the user is allowed to submit an incomplete form.

读另外一个问题就在这里，我使用ajaxStart和ajaxComplete禁用和后重新启用的形式提交按钮。

After reading another question on here, I am using ajaxStart and ajaxComplete to disable and re-enable the submit button of the form.

我也想下一个显示请稍候消息，按钮，使用户了解正在发生的事情。

I also want to display a 'please wait' message next to the button to keep the user informed of what is happening.

这一切工作正常，但在99％的情况下，这个消息闪烁，然后很快消失，也快速阅读和寻找分心/越野车。

This all works fine, but in 99% of the cases this message flashes and disappears quickly, too quick to read and looking distracting / buggy.

我想要做的是只显示此消息，如果Ajax调用花费很长的时间来响应（表示，我们已经有了一个连接速度慢） - 说25​​0毫秒。

What I would like to do is only show this message if the ajax call is taking a long time to respond (indicating we've got a slow connection) - say 250ms?

我以前这样还没有使用jQuery的计时器希望这将帮助我得到正视与所涉及的概念。

I've not used timers in jquery before so this will hopefully help me get to grips with the concepts involved.

下面的功能是目前为止

// 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的，所以我需要一些初学者有所帮助！

I know it's a very basic question and I could easily do it in PHP but i'm a novice to jquery so I need a bit of beginners help!

谢谢！

推荐答案

setTimeout的是你的朋友在这里。

setTimeout is your friend here.

沿东西线以下应该工作，虽然我没有测试过错别字等。

something along the lines of the below should work, although I haven't tested it for typos etc.

// 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);
});

这篇关于如何显示消息仅当一定量的时间已经过去的jquery - prevent表单提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！