Question

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

这是我的代码：

 $('#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);

[...]

.delay（）方法最适合在排队的jQuery之间延迟效果。因为它是有限的 - 例如，它没有提供一种方法取消延迟-.delay（）不是JavaScript本机的替代品 setTimeout函数，可能更适合某些用途例。

请参阅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效果/动画，然后delay（）将按你的意愿工作......

使用jquery添加延迟

3 个答案: