Question

我似乎遇到了典型的“异步问题”，解决方案就是我。

我有一个bootstrap form wizard，这只是一个即兴的标签/幻灯片有点儿的东西。我的所有“步骤”都是各自标签/幻灯片中的表格。

它有一组下一个/上一个按钮来浏览幻灯片。并且在之前提供功能回调 转移到下一张幻灯片。在其中（回调）我是“客户端验证”当前幻灯片中的表单，如果已经验证，那么我将使用ajax提交表单。一旦我从服务器得到响应，我决定是否返回true（继续下一张幻灯片）或返回false（停止导航到下一张幻灯片）。

我已经调查过了..

Using callbacks但是它不会阻止插件进入下一张幻灯片，btw是硬编码的成功消息，所以当我们等待ajax响应时，向导已经移动到下一张幻灯片。 / LI>
使用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的{{3}}说：

单击下一个按钮时触发（返回false以禁用转到下一步）

只需从处理程序返回false即可。在AJAX成功回调中，调用docs进入下一张幻灯片。

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

Answer 2

我会使用不同的事件来执行您的异步代码。我们的想法是使用onTabChange（考虑使用onTabClick和onTabShow），这样您就无法移动到bootstrapWizard();导航的下一个标签。只有在所有内容通过编程方式触发下一个选项卡后，您必须找到它。

$('element').bootstrapWizard('onTabShow', function(){

  //Do everything you need here and show next tab
  $('element').bootstrapWizard('show',3);
  return false;
});

Answer 3

使用承诺？

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

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

javascript中现在也有承诺！

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

然后，

promise.then(onFulfilled, onRejected);

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

3 个答案: