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> Loading');
$.post("includes/modlist/pack.php",function(data){
//$('#banana').addClass("fa-spin");
$('#chocobo').addClass('done');
$('#chocobo').html('<div id="banana" class="fa fa-check"></div> Done');
$('#chocobo').delay(1000).html('<div id="banana" class="fa fa-refresh"></div> Download');
});
});
Can someone help me please ?
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> Done');
setTimeout(function() {
$('#chocobo').html('<div id="banana" class="fa fa-refresh"></div> Download');
}, 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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With