暂停函数执行流，直到ajax请求完成

Question

我似乎遇到了典型的“异步问题”，无法解决。

我有一个引导表单向导，这只是一个即兴的标签/幻灯片类似的东西。我所有的“步骤”都是在各自的标签/幻灯片内的表格。

它有一组下一个/上一个按钮可以在幻灯片周围导航。并且在移动到下一张幻灯片之前，它提供了一个函数回调。在其中（回调），我正在“客户端验证”当前幻灯片中的表单，如果它被验证了，那么我将使用Ajax提交表单。一旦我从服务器得到响应，我就决定是返回true（继续下一张幻灯片）还是返回false（停止导航到下一张幻灯片）。

我已经调查了..

• 使用回调，但它不会阻止插件继续下一张幻灯片，而下一张幻灯片是一条硬编码的成功消息，所以当我们等待ajax响应时，向导已经移动到了下一张幻灯片。
• 使用Async:false，但这会疯狂地挂起浏览器（按设计），直到请求完成，所以不要挂起，这正是我想要的。

我的代码如下所示。

JS.

  jQuery('#progressWizard').bootstrapWizard({
            'nextSelector': '.next',
            'previousSelector': '.previous',
            onNext: function (tab, navigation, index) {
                if (index == 1) { // Here I am deciding which code to execute based on the current slide/tab (index)
                    if (jQuery("#paymentstep1").data('bValidator').validate()) {
                        var data = new FormData(jQuery('#paymentstep1')[0]);
                        jQuery("#cgloader").fadeIn();
                        var success = false;
                        jQuery.ajax({
                            type: "post",
                            async: false,
                            contentType: false,
                            processData: false,
                            url: "xyz.php",
                            dataType: "json",
                            data: data,
                            success: function (r) {

                              return r;
                            }
                          });
                        }....

Answer 1

onnext的文档如下：

单击下一步按钮时触发（返回false以禁止移动到下一步）

因此，只需从处理程序返回false即可。在AJAX success回调中，调用next进入下一张幻灯片。

var requestCompleted = false;
jQuery('#progressWizard').bootstrapWizard({
  'nextSelector': '.next',
  'previousSelector': '.previous',
  onNext: function (tab, navigation, index) {
    if (index == 1) { // Here I am deciding which code to execute based on the current slide/tab (index)
      if (jQuery("#paymentstep1").data('bValidator').validate()) {
        if(!requestCompleted) {
          var data = new FormData(jQuery('#paymentstep1')[0]);
          jQuery("#cgloader").fadeIn();
          var success = false;
          jQuery.ajax({
              type: "post",
              url: "xyz.php",
              data: data,
              // ...
              success: function (r) {
                requestCompleted = true;
                jQuery('#progressWizard').bootstrapWizard('next');
                return r;
              }
            });
          return false;
        }
      }
    }
  });