Add delay with jquery

Question

I want to use a method .delay()to wait 1 s before changing the contents of an element. I have a button on my page, and when the ajax request is executed, the diplays button is "done". After that, I want to wait 1 second and display "download". But the problem is that the “download” is displayed immediately after the “done” without delay.

Here is my code:

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

Can anybody help me?

Answer 1

I do not think it is better to use delay(). Everything is fine, just using setTimeout. Observe the following ...

[...]

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

: ! . .

Answer 3

, 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/, delay() ...