用jquery添加一个延迟

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

这里是我的代码：

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

有人能帮助我吗？

来源

2015-09-17 Erlaunis

我不认为利用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 -

来源

2015-09-17 23:50:00 scniro

谢谢，它的作品！我曾尝试过这种方法，但没有奏效，我可能犯了一个错误。但现在没关系，再次感谢:) – Erlaunis

jQuery的延迟功能可用于改变添加到队列，如动画的步骤简化演示。你可以尝试使用setTimeout来取得你要找的效果：

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

编辑：哎呀！我太慢了。反正Erlaunis也有更好的答案。

来源

2015-09-17 23:52:59

但是，你可以用它在这条路上，有回调函数fadeIn()，如果你不希望使用的setTimeout（）：

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的效果/动画，然后延迟（）将工作，如你所愿...

来源

2015-09-18 00:00:01 sinisake

不错的可能性，我倾向于这是有点矫枉过正，并倾向于一个更精简的方法。无论发现什么 – scniro

谢谢，是的...只是一种可能性...原生js setTimeout（）可能更快，更优雅......但我喜欢使用jQuery提供的功能（如果库已经被使用）... :) – sinisake

用jquery添加一个延迟

回答

相关问题