Question

我正在努力更好地掌握jQuery的承诺。我创建了一个玩具问题/ repro（重新发明验证轮，用于学习目的），如下所示：

$(function() {
  "use strict";

  function isStep1Valid() { 
    return !!$("input").val();
  }
  
  function leaveStep1() {
    if (!isStep1Valid()) {
      return $.when(null).fail();            // <-- A. this seems off
    }  
    return $(".step1").slideUp().promise();
  }
  
  function enterStep2() {
    return $(".step2").slideDown().promise();
  }
  
  function handleFail() {
    return $(".step1 .error").slideDown().promise();
  }
  
  function handleClick() {
    leaveStep1()
      .fail(handleFail)                      // <-- B. this seems off
      .done(enterStep2);
  }

  $("button").on("click", handleClick);
});

.step { background-color: #ddd; padding: 10px; }
.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="step step1">
  Step 1
  <input placeholder="enter anything">
  <button>next</button>
  <div class="error hidden">ERROR!</div>
</div>
<div class="step step2 hidden">
  Step 2...
</div>

目前，在上面：

输入输入文本，然后单击“下一步”按预期工作;
输入否输入并错误地点击“下一步”会显示step2而不是“错误”。

我认为我在A和B做的不正确，但我不知道如何解决这个问题。哎呀，我甚至不确定我的问题的正确搜索条件或问题标题是什么。

哎呀，我甚至可能有一个XY问题，但是我只是看不出“X”是什么。接近“X”的东西/我正在努力工作的原始事物：

点击按钮，我想尝试并离开第1步...
- ...如果离开第1步失败：显示错误;
- ...如果成功：显示第2步;

失败的jQuery承诺链

0 个答案: