javascript - 延迟 Ajax 提交

Question

我有一条加载消息和一条成功消息，我想在提交表单之前淡入和淡出它们。我无法真正获得正确的代码来显示这些消息几秒钟，然后像往常一样使用 Ajax 提交表单。我尝试过像这样连接提交按钮。

jQuery(document).ready(function (e) {
    jQuery( "#submitbutton" ).click(function() {
           e.preventDefault();
           jQuery('#loadingMessage').fadeIn(1000);
           jQuery('#loadingMessage').hide().delay(1000);
           jQuery('#saveMessage').show().delay(2000).fadeOut(1000);
       setTimeout( function () { 
            jQuery("form[id=postorder]").submit();
        }, 4000);
    });
});

或者这个，这只是一个例子，我已经尝试了一些。

jQuery(document).ready(function (e) {
    jQuery("form[id=postorder]").submit({
           e.preventDefault();
           jQuery('#loadingMessage').fadeIn(1000);
           jQuery('#loadingMessage').hide().delay(1000);
           jQuery('#saveMessage').show().delay(2000).fadeOut(1000);
       setTimeout( function () { 
            [Submit form here]
        }, 4000);
    });
});

消息运行良好。感谢您的帮助!

Answer 1

你可以做这样的事情

jQuery(document).ready(function (e) {
    jQuery( "#submitbutton" ).click(function() {
           jQuery('#loadingMessage').fadeIn(2000, function(){
            jQuery('#loadingMessage').hide(2000, function(){
              jQuery('#saveMessage').show(2000).fadeOut(2000, function(){
                jQuery("form[id=postorder]").submit();
              });
            });
           });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p id="loadingMessage" style="display:none;">Loading Message</p>
<p id="saveMessage"  style="display:none;">Save Message</p>

<form id="postorder" action="" method="post">
  <input type="button" id="submitbutton" value="submit">
</form>

jQuery 是非阻塞，因为它是一个 Javascript 库。

非阻塞意味着它不会等待上一行完成它的工作。当上一行代码仍在工作时，它将移至下一行。

因此，在这种情况下，您需要使用回调函数来按顺序执行某些操作。

希望这有帮助:)