使用 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');        
   });
});

有人可以帮我吗？

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);

[...]

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

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

JSFiddle Link - 简化演示

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 也有更好的答案。

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 effect/animation，然后 delay() 就会如你所愿地工作...

使用 jquery 添加延迟

Add a delay with jquery

html

javascript

jquery

delay