使用jquery添加延迟

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 - 简化演示