Javascript 如何使用延迟对象等待AJAX完成

工作流：

宏观目标是不让用户等待任何东西，这就是我尝试做的用户流程：

用户填写表格

用户点击按钮提交表单

表单通过AJAX异步提交（FWIW，处理大约需要5秒）

表单异步提交后，jQuery立即弹出一个调查模式

用户可以填写调查并单击按钮提交，也可以单击按钮完全跳过调查

我现在很难做到的是用户单击

提交调查

或

跳过调查

后的效果。首先谈论跳绳是最容易的。如果用户选择跳过调查，则会发生以下情况：

只要异步仍然需要完成（如果需要的话），页面上就会出现一个“工作”覆盖，因为一旦异步完成，它将返回jQuery代码中需要执行的下一个操作（例如，假设这是一个简单的

控制台.log

）

如果用户填写调查并单击“提交调查”，则会发生以下情况：

调查通过AJAX异步提交

只要异步仍然需要完成，页面上就会出现一个“工作”覆盖（与单击

跳过调查

完全相同）

额外的复杂性在于，调查提交到不同的路线，这取决于用户单击“提交调查”

代码

我将借此机会进一步了解异步流的一般情况，这就是代码混乱的原因。现在我想的实现是表单提交AJAX，一旦成功或失败，它会为调查提交生成1）合适的URL，2）提交或调查最终将触发的下一个操作）

所以有点像

$.ajax({
  type : "POST",
  url :  '/orders/create_or_update',
  dataType: 'json', 
  contentType: 'application/json',
  data : JSON.stringify(params)
})
.done(function(){
  // submit-survey post route
  submit-url = '/orders/success_ajax_update'
  // next action triggered by skip-survey and submit-survey
  function nextAction() { console.log("fail") }
})
.fail(function(){
  // submit-survey post route
  submit-url = '/almost_orders/fail_ajax_update'
  // next action triggered by skip-survey and submit-survey
  function nextAction() { console.log("fail") }
})

$(document).on("click", "#submit-survey", function() {
  if (isFunction(nextAction)) {
    $.ajax({url: submit-url, ... })
    nextAction()
  } else {
    addWorkingOverlay();
  }
})

$(document).on("click", "#skip-survey", function() {
  if (isFunction(nextAction)) {
    nextAction()
  } else {
    addWorkingOverlay();
  }
})

但是，上面的问题是，如果用户在AJAX完成之前单击

submit survey

或

skip survey

，则会添加工作覆盖，但没有任何内容会显示“哦，现在AJAX已经完成，下一步已经定义，所以再次循环”。显然，我可以添加一个计数器来检查

isFunction（nextAction）

，但这似乎完全违背了AJAX的初衷

如何解决这个问题

有新的想法，需要更多的帮助来充实。根据文档，您可以使用jQuery的

$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) )
  .then( myFunc, myFailure );

在我的情况下，这可以起作用，只需第二次
。ajax
我有一个按钮单击（提交或跳过）。这个想法的问题是，我如何将用户点击提交或跳过按钮转变为
可以使用的已解决延迟。当
可以使用时？
您只在承诺
done
回调中声明一个函数-它在
done
范围之外不可用，那么，为什么不在默认情况下将按钮设置为禁用，并在ajax完成时启用它（在
done
部分）？这对用户来说不那么友好，基本上我希望用户始终能够单击“前进”。在上述工作流中，仅当用户跳过或提交调查的速度过快时，才会强制停止该用户。但除此之外，它是直接通过的，是的，申报点做得很好<代码>提交url
我可以初始化为全局变量<代码>下一步操作
。。。更复杂的是，在
$.ajax（{..
）之前和
done
回调内部创建一个全局变量（
var nextAction；
），将当前函数更改为
nextAction=function（）{console.log（“fail”）}；
，这样您就可以使用一个变量并为其分配一个函数，该函数也可以在单击事件中使用。我将添加工作覆盖作为提交原始表单的一部分。然后在此基础上显示调查。然后，无论用户对调查做了什么，工作覆盖都会出现，并在原始表单出现时消失完成。您只在promise
done
回调内声明一个函数-在
done
范围外不可用，所以为什么不将按钮设置为默认禁用，并在ajax完成时启用它（在
done
部分中）？这对用户不太友好，基本上我希望用户始终能够提前单击。在上面的工作流中，只有当用户跳过或提交调查太快时，才会强制停止用户。但如果用户跳过或提交调查太快，则会直接停止。是的，声明点做得很好。
提交url
我可以初始化为全局变量。
nextAction
…更复杂的是，在
$.ajax（{..
）之前和
done
回调内部创建一个全局变量（
var nextAction；
），将当前函数更改为
nextAction=function（）{console.log（“fail”）}；
，这样您就可以使用一个变量并为其分配一个函数，该函数也可以在单击事件中使用。我将添加工作覆盖作为提交原始表单的一部分。然后在此基础上显示调查。然后，无论用户对调查做了什么，工作覆盖都会出现，并在原始表单出现时消失尼什。