单击时更改按钮文本，延迟问题[重复]答案

【问题标题】：changing button text on click, problem with delay [duplicate]单击时更改按钮文本，延迟问题[重复]
【发布时间】：2019-09-04 12:56:44
【问题描述】：

我认为代码解释了我想要做什么。问题是延迟不起作用。

 $( "#AddToCart" ).click(function() {
       $("#AddToCartText").text("Adding");
       $("#AddToCartText").delay(500).text("Add to cart");
  });

【问题讨论】：

使用setTimeout 延迟

标签： javascript jquery

【解决方案1】：

.delay() 方法最适合延迟排队的 jQuery 效果。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的原生 setTimeout 函数，这可能更适合某些用例。

$( "#AddToCart" ).click(function() {
       $("#AddToCartText").text("Adding")
       setTimeout(function() { 
          $("#AddToCartText").text("Add to cart");; 
       }, 500);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="AddToCart">Add To Cart</button>
<div id="AddToCartText">

【讨论】：

【解决方案2】：

delay() 默认为动画队列，用于诸如fadeOut() 等效果。使用setTiemout 而不是delay。试试下面的代码-

$("#AddToCart").click(function() {
  $("#AddToCartText").text("Adding");
  setTimeout(function() {
    $("#AddToCartText").delay(500).text("Add to cart")
  }, 500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="AddToCartText"></div>
<Button id="AddToCart">Click It!</Button>

【讨论】：

【解决方案3】：

这样使用delay，也可以使用setTimeout

$( "#AddToCart" ).click(function() {
       $("#AddToCartText").text("Adding");
      // $("#AddToCartText").delay(1000).text("Add to cart");
       $('#AddToCartText').delay(600).queue(function(n) { 
        $(this).text("Add to cart"); n();
      })
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="AddToCart"> Add </button>

<span id="AddToCartText"></span>

【讨论】：

【解决方案4】：

延迟方法仅适用于 jQuery 中的排队项（主要是动画）。如果你想做这样的改变，你必须使用setTimeout。

$("#AddToCart").click(function() {
  $("#AddToCartText").text("Adding");
  setTimeout("setback()", 500);
});

function setback() {
  $("#AddToCartText").text("Add to cart");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="AddToCart">Add To Cart</button>
<div id="AddToCartText"></div>

【讨论】：