Question

我认为代码说明了我要执行的操作。问题是延迟不起作用。

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

Answer 1

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>

Answer 2

.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">

Answer 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>

Answer 4

delay方法仅适用于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>

单击更改按钮文本，出现延迟问题

4 个答案: