javascript - 多个setTimeout和clearTimeout互相干扰

Question

我正在努力完成以下任务。我有多个带有按钮的表单。当我点击那个按钮时，我希望它改变颜色和文本 2 秒。当在该时间范围内再次单击时，它会重置并且旋转将重新开始。

到目前为止，我的代码按预期工作，但是，当我在这 2 秒内单击另一个表单的按钮时，旋转停止，因为 timerId 被 clearTimeout 清除。

看我的例子，当你点击‘order1’并在2秒内点击‘order2’然后‘order1’不会变回原来的状态。有没有办法让其他表单互不干扰？

var timerId, delay = 2000;

$(".product-form").submit(function(e){
 
var button = $(this).find('button[type=submit]'),
  order = button.find("span:eq(0)"),
  added = button.find("span:eq(1)");

  clearTimeout(timerId);
  added.hide();
  order.hide();
  button.addClass("green");
  added.slideDown("slow");

  timerId = setTimeout(function() {
    added.hide();
    order.show();
    button.removeClass("green");
  }, delay); 
  e.preventDefault();
});

form {
  float: left;
  padding: 10px;
}

.hide {
  display: none
}

#button {
  width: 200px;
  height: 40px;
  border: none;
  background: orange;
}

.green {
  background: green !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="product-form" action="#cart" method="post">
  <button id="button" type="submit">
    <span>Order1</span>
    <span class="hide">&#10003; Added</span>
  </button>
</form>
 
<form class="product-form" action="#cart" method="post">
  <button id="button" type="submit">
    <span>Order2</span>
    <span class="hide">&#10003; Added</span>
  </button>
</form>

<form class="product-form" action="#cart" method="post">
  <button id="button" type="submit">
    <span>Order2</span>
    <span class="hide">&#10003; Added</span>
  </button>
</form>

Answer 1

您的代码对所有按钮仅使用一个 timerId，因此这就是它们相互踩踏的原因。您可以将 timerId 存储在按钮上，参见 *** 行:

var delay = 2000; // *** No timerId here

$(".product-form").submit(function(e) {
  var $this = $(this),                               // ***
      timerId = $this.data("timerId"),               // ***
      button = $this.find('button[type=submit]'),    // ***
      order = button.find("span:eq(0)"),
      added = button.find("span:eq(1)");

  clearTimeout(timerId);
  added.hide();
  order.hide();
  button.addClass("green");
  added.slideDown("slow");

  $this.data("timerId", setTimeout(function() {      // ***
    added.hide();
    order.show();
    button.removeClass("green");
  }, delay));                                        // ***
  e.preventDefault();
});

form {
  float: left;
  padding: 10px;
}

.hide {
  display: none
}

#button {
  width: 200px;
  height: 40px;
  border: none;
  background: orange;
}

.green {
  background: green !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="product-form" action="#cart" method="post">
  <button id="button" type="submit">
    <span>Order1</span>
    <span class="hide">&#10003; Added</span>
  </button>
</form>
 
<form class="product-form" action="#cart" method="post">
  <button id="button" type="submit">
    <span>Order2</span>
    <span class="hide">&#10003; Added</span>
  </button>
</form>

<form class="product-form" action="#cart" method="post">
  <button id="button" type="submit">
    <span>Order2</span>
    <span class="hide">&#10003; Added</span>
  </button>
</form>