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

[...]

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