超时时将按钮值更改回原始值（表单两次提交）

Question

我试图通过暂时禁用“提交”按钮并将“提交”按钮的值更改为“正在处理...”来修复双重提交表单，以便用户知道发生了什么。

禁用工作onClick，“提交”值更改为“处理中...”，但是在setTimeout函数结束后，我无法将值更改回“提交” 。

有人知道我该怎么做吗？

$(function() {
  $("#submit_btn").click(function() {
    $("#submit_btn").attr("disabled", "disabled");
    this.value = "Processing...";
    setTimeout(function() {
      this.value = "Submit"; //<- this line doesn't work
      $("#submit_btn").removeAttr("disabled");
    }, 5000);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="submit_btn" type="submit" value="Submit" />

Answer 1

只需更改this为即可$("#submit_btn")：

$(function() {
  $("#submit_btn").click(function() {
    $("#submit_btn").attr("disabled", "disabled");
    $("#submit_btn").val("Processing...");
    setTimeout(function() {
      $("#submit_btn").val("Submit");
      $("#submit_btn").removeAttr("disabled");
    }, 5000);
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input id="submit_btn" type="submit" value="Submit" />

问题是您的功能正在干扰this。您可能已经做过self = this，但会产生相同的效果：

$(function() {
  $("#submit_btn").click(function() {
    var self = this;
    $(self).attr("disabled", "disabled");
    $(self).val("Processing...");
    setTimeout(function() {
      $(self).val("Submit");
      $(self).removeAttr("disabled");
    }, 5000);
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input id="submit_btn" type="submit" value="Submit" />

或者您可以使用event.target：

$(function() {
  $("#submit_btn").click(function(event) {
    $(event.target).attr("disabled", "disabled");
    $(event.target).val("Processing...");
    setTimeout(function() {
      $(event.target).val("Submit");
      $(event.target).removeAttr("disabled");
    }, 5000);
  });
});

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<input id="submit_btn" type="submit" value="Submit" />