使用 jQuery 添加延迟

Question

我希望使用.delay()方法在改变元素内容前等待1秒钟。我的页面上有一个按钮，当ajax请求完成时，按钮会显示"done"。之后，我想等待1秒钟并显示"download"。但问题是，“download”立即在“done”的后面显示，没有延迟。

这是我的代码:

 $('#chocobo').click(function(){
   $('#chocobo').html('<div id="banana" class="fa fa-refresh fa-spin"></div>&nbspLoading');
   $.post("includes/modlist/pack.php",function(data){
        //$('#banana').addClass("fa-spin");
        $('#chocobo').addClass('done');
        $('#chocobo').html('<div id="banana" class="fa fa-check"></div>&nbspDone');
        $('#chocobo').delay(1000).html('<div id="banana" class="fa fa-refresh"></div>&nbspDownload');        
   });
});

请问有人能帮我吗？

- Erlaunis

Answer 1

我认为在这里使用 delay() 并不是最好的选择。你可以只使用 setTimeout。请参考以下代码...

[...]

$('#chocobo').html('<div id="banana" class="fa fa-check"></div>&nbspDone');

setTimeout(function() {
    $('#chocobo').html('<div id="banana" class="fa fa-refresh"></div>&nbspDownload');  
}, 1000);

[...]

.delay()方法最适合在jQuery效果之间延迟。因为它有限制——例如，它不提供取消延迟的方法——.delay()并不能替代JavaScript的本地setTimeout函数，后者可能更适用于某些用例。

请参阅delay()文档以获取示例用法和场景

JSFiddle链接-简化演示

- scniro

---

谢谢，它有效！我曾经尝试过这种方法，但是没有成功，可能是我犯了一个错误。但现在没问题了，再次感谢 :) - Erlaunis

Answer 2

jQuery的延迟函数用于添加到队列中的事物，例如动画的步骤。您可以尝试使用setTimeout来获得所需的效果：

setTimeout(function(){ 
  $('#chocobo').html('<div id="banana" class="fa fa-refresh"></div>&nbsp; Download');
}, 1000); // 1000 being 1s in ms

编辑：糟糕！我太慢了。Erlaunis的答案也更好。

- Justin B. Evans

Answer 3

然而，如果您不想使用setTimeout()，可以使用回调函数来使用fadeIn()：

http://jsfiddle.net/ufsxaxm3/1/

$( "#chocobo" ).html('<div id="banana" class="fa fa-check"></div>&nbspDone').fadeIn('slow', function() {
$('#chocobo').html('<div id="banana" class="fa fa-refresh"></div>&nbspDownload').delay(1000).fadeIn(1000);
  });;

所以，您需要一些 jQuery 特效/动画，然后 delay() 就会按照您的意愿工作...

- sinisake

---

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - scniro

谢谢，是的...还有一种可能性...原生js的setTimeout()可能更快，甚至更优雅...但我喜欢使用jQuery提供的东西（如果已经使用了库）... :) - sinisake