javascript - 如何暂停在链中间延迟的 jQuery 解析？

Question

我试图将序列化逻辑强制应用到网页上的一组异步事件上。我相当确定我想使用 jQuery 延迟对象，但我遇到了一个问题，即我想要执行的函数取决于用户决定通过单击各种按钮进行选择的时间。我正在寻求使用以下 jsFiddle 想法来完成此操作的帮助:

考虑 4 个按钮的序列。单击时，每个按钮都会禁用自身并启用下一个按钮。每个按钮在启用之前不应设置其事件。仅在启用第三个按钮后才能完成一项添加的任务(在本例中为警报)。

基本 HTML 代码

<button id="btn1">Click 1st</button>
<button id="btn2" disabled="disabled">Click 2nd</button>
<button id="btn3" disabled="disabled">Click 3rd</button>
<button id="btn4" disabled="disabled">Click 4th</button>

每个步骤的任务

var fnDoStageOne = function() {
  $("#btn1").one("click", function(event, ui) {
    $("#btn1").prop("disabled", true);
    $("#btn2").prop("disabled", false);
    //STAGE ONE IS ONLY DONE AFTER THIS POINT
  });
};

var fnDoStageTwo = function() {
  $("#btn2").one("click", function(event, ui) {
    $("#btn2").prop("disabled", true);
    $("#btn3").prop("disabled", false);
    //STAGE TWO IS ONLY DONE AFTER THIS POINT
  });
};

var fnDoStageThree = function() {
  $("#btn3").one("click", function(event, ui) {
    $("#btn3").prop("disabled", true);
    $("#btn4").prop("disabled", false);
    //STAGE THREE IS ONLY DONE AFTER THIS POINT
  });
  alert("Shouldn't see this if button 3 isn't active yet");
};

var fnDoStageFour = function() {
  $("#btn4").one("click", function(event, ui) {
    $("#btn4").prop("disabled", true);
    alert("Task complete");
    //STAGE FOUR IS ONLY DONE AFTER THIS POINT
  });
};

控制逻辑不正确

var oDeferredObj = $.Deferred();

oDeferredObj.then(fnDoStageOne);
oDeferredObj.then(fnDoStageTwo);
oDeferredObj.then(fnDoStageThree);
oDeferredObj.then(fnDoStageFour);
oDeferredObj.resolve();

jsfiddle可以在这里看到:http://jsfiddle.net/sva79/

我最初的理解是，我可以使用 .then() 函数将函数链接到延迟函数中。显然，这不起作用，因为步骤 3 中的附加任务会在页面加载时触发。我需要如何调整此场景的控制或逻辑来解决每个步骤，直到注册了适当的按钮按下？

Answer 1

您的代码示例没有按照您的想法进行操作。您所做的只是添加到解决 oDeferredObj 后立即要做的事情列表中。此外，还存在解决任务何时实际“完成”的问题，您的代码并没有完全标记这一点。

这似乎是我之前在另一个问题中解决过的问题，但我不确定我是否喜欢我当时给出的答案，所以让我再试一次。

您正在寻找一种将新 promise 链接在一起的方法。我想，您还想要一种方式来说明 promise 何时得到解决(或拒绝)。

将数据从一个 Promise 异步获取到另一个 Promise 的一种好方法是将它们与 pipe 链接起来，但是当您想从 UI 事件中触发任务完成时，我有很难想象出比我下面的更好的东西。

我不会发誓这是最好的方法，我能想到的处理这个问题的最简单方法是创建一个实用函数，它接受给定的 promise 和“任务”，创建一个新的 promise ，让您的任务决定如何处理 Promise，但仅在给定的 Promise 得到解决之后，并返回新的 Promise。

var nextStage = function (promise, task) {
  var oDeferredObj = $.Deferred();
  promise.then(function () {
    task(oDeferredObj);
  });
  return oDeferredObj;
}

这可以用于将您的任务以菊花链方式连接在一起:

/* Creation of deferred and initial wiring */
var p1;
var starterObj = $.Deferred();
p1 = starterObj;
p1 = nextStage(p1, fnDoStageOne);
p1 = nextStage(p1, fnDoStageTwo);
p1 = nextStage(p1, fnDoStageThree);
p1 = nextStage(p1, fnDoStageFour);
p1.done(function () {
  alert("All stages done.");
})
$("#start").one("click", function (event, ui) {
  //fire it up.
  $("#start").prop("disabled", true);
});

显然，您需要做一些事情来表明特定任务在某个时刻已完成，例如:

var fnDoStageOne = function (promise) {
  //setup, etc.
  $("#btn1").one("click", function (event, ui) {
    //.. whatever needs to happen  in the ui.
    //STAGE ONE IS ONLY DONE AFTER THIS POINT
    promise.resolve();
  });
};

请注意，我只是为您提供了 promise 成功的开始。当他们失败时，最好多做一点。。另外，如果您想将数据从一个 promise 传递到另一个 promise ，您可能需要管道等。

jsFiddle 中的完整源代码(根据您的修改)here