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

Pause the function execution flow till ajax request completes

本文关键字：ajax 请求 直到 函数 执行流 暂停      更新时间：2023-09-26

我似乎遇到了典型的"异步问题"，解决方案让我措手不及。

我有一个引导表单向导，它只是一个即兴的选项卡/幻灯片之类的东西。我所有的"步骤"都是在各自的选项卡/幻灯片中形成的。

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

我已经调查过了。。

  • 使用回调，但它不会阻止插件继续到下一张幻灯片，btw是一个硬编码的成功消息，所以当我们等待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;
                            }
                          });
                        }....

onNext的文档说：

单击下一个按钮时激发（返回false禁用进入下一步）

因此，只需从处理程序返回false即可。在AJAX成功回调中，调用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;
        }
      }
    }
  });

使用promise？

jQuery中有一个承诺。这是语法。

$.when( $.ajax( "test.aspx" ) ).then(function( data, textStatus, jqXHR ) {
  alert( jqXHR.status );    });

现在javascript中也有promise！

var promise = new RSVP.Promise(function(fulfill, reject) {
  (...)
});

然后，

promise.then(onFulfilled, onRejected);

我会使用不同的事件来执行异步代码。这个想法是使用onTabChange（考虑使用onTabClick和onTabShow），这样就可以防止移动到bootstrapWizard();导航的下一个选项卡。只有在一切通过后，才能以编程方式启动下一个选项卡，您必须了解如何启动。

$('element').bootstrapWizard('onTabShow', function(){
  //Do everything you need here and show next tab
  $('element').bootstrapWizard('show',3);
  return false;
});
相关文章：