javascript - Add a delay with jquery - Stack Overflow

admin管理员组

文章数量:1325140

I want to use the methode .delay() to wait 1 sec before changing the content of an element. In my page, I have a button and when the ajax request is done, the button diplays "done". After that, I want to wait 1 sec and display "download". But the problem is that "download" is displayed immediately after the "done" without the 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 someone help me please ?

I want to use the methode .delay() to wait 1 sec before changing the content of an element. In my page, I have a button and when the ajax request is done, the button diplays "done". After that, I want to wait 1 sec and display "download". But the problem is that "download" is displayed immediately after the "done" without the 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 someone help me please ?

• javascript
• jquery
• html
• delay

Share Improve this question Follow edited Sep 17, 2015 at 23:52 scniro 17k88 gold badges6666 silver badges107107 bronze badges asked Sep 17, 2015 at 23:43 ErlaunisErlaunis 1,45166 gold badges3333 silver badges5050 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

I don't think leveraging delay() is best used here. You're fine with just using a 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);

[...]

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.

See the delay() docs for example usages and scenarios

JSFiddle Link - simplified demo

The jQuery delay function is used for things added to a queue, like steps of an animation. You could try using the setTimeout instead to get the effect you're looking for:

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

EDIT: Whoops! I was too slow. Erlaunis has the better answer anyway too.

However, you can use it on this way, with callback function for fadeIn(), if you don't want to use setTimeout():

http://jsfiddle/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);
  });;

So, you need some jquery effect/animation, and then delay() will work as you wish...

本文标签： javascriptAdd a delay with jqueryStack Overflow