I cant seem to get my text to update, with a delay of 0.8seconds.
function beginningText() {
$('#bubbleText').text('H').delay(800);
$('#bubbleText').text('He');
}
Add a comment
|
2 Answers
.delay() blocks code which chains from it on the same statement, but not code which comes on statements after it.
Technically the structure you want is this:
$('#bubbleText').text('H').delay(800).text('He');
However, this won't work. For a very non-obvious reason (that I just had to look up). .delay() operates on items that are "queued" in jQuery, such as animations and other things which, well, take time. Setting text, or any other such "instant" operation, isn't "queued" and just happens immediately.
You can manually add operations to the queue with the .queue() function:
$('#bubbleText').text('H').delay(800).queue(function(){
$('#bubbleText').text('He');
});
4 Comments
igetstuckalot
when the document loads, it just says "HE" straight away instead of "h" then "he"
David
@igetstuckalot: Interesting. I just learned something new :) I've updated the answer with a new example: jsfiddle.net/93vatb5v
igetstuckalot
sorry to be annoying, but if i wanted to add something else to that queue ('hel','hell','hello') how would i do so?
David
@igetstuckalot: In that case you'd chain more calls to
.queue() after the original. Something like blah().delay().queue(function(){}).delay().queue(function(){}); It could get ugly fast, of course.You probably want set timeout here and not delay. There is s
Created a fiddle for you https://jsfiddle.net/vatsalpande/5d09nbLo/
Sample Code
$(document).ready(function(){
function beginningText() {
$('#bubbleText').text('H');
setTimeout(function(){ $('#bubbleText').text('HE') }, 3000);
}
beginningText();
});
<div id = "bubbleText"></div>
As per jQuery Documentation
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.
So the keypoints to take away are
Use .delay() for jQuery effects including animations.
setTimeout() is best used for everything else. For example when you need to trigger an event at a certain elapsed time.
Hope this be of some help.
Happy Learning
4 Comments
cngodles
Are there any benefits to declaring the function within Document ready?
Vatsal
The code inside document.ready will be executed after your document is loaded. If you dont wrap it inside ready then there may be a case that the script loads before the document is loaded. So there wont be anything named bubbleText and your code will look into it and will find nothing and will do nothing or may give you undefined if you try to do anything with it. Hope it helps
cngodles
I get why the function call is in there, I was just wondering why the function declaration was there.
Vatsal
That can be moved outside.