jquery run function after settimeout

Question

I have an animation that runs great, but now I'm trying to reverse this animation by fading out the text and then running another function. Upon this page being loaded the following runs...

 $(document).ready(function () {
 dream();
 setTimeout(runul(), 8000, function() {showVideo()});
 });

The dream function creates bubbles on the body background.

 function dream() {
 //calculating random color of dream
 if (animation_stopped) return;
 var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')';
 //calculating random X position
 var x = Math.floor(Math.random() * $(window).width());
 //calculating random Y position
 var y = Math.floor(Math.random() * $(window).height());
 //creating the dream and hide
 drawingpix = $('<span>').attr({ class: 'drawingpix' }).hide();
 //appending it to body
 $(document.body).append(drawingpix);
 //styling dream.. filling colors.. positioning.. showing.. growing..fading
 drawingpix.css({
 'background-color': color,
 'border-radius': '100px',
 '-moz-border-radius': '100px',
 '-webkit-border-radius': '100px',
 top: y - 14, //offsets
 left: x - 14 //offsets
 }).show().animate({
 height: '500px',
 width: '500px',
 'border-radius': '500px',
 '-moz-border-radius': '500px',
 '-webkit-border-radius': '500px',
 opacity: 0.1,
 top: y - 250, //offsets
 left: x - 250
 }, 3000).fadeOut(2000);
 //Every dream's end starts a new dream
 window.setTimeout('dream()', 200);
 }

While the dream function is running, I run the runul() function, which starts typing text.

 function runul() {
 jQuery("#ticker").ticker({
 cursorList: " ",
 rate: 50,
 delay: 18000
 }).trigger("play").trigger("stop");
 // Trigger events
 jQuery(".stop").click(function () {
 jQuery("#ticker").trigger("stop");
 return false;
 });
 jQuery(".play").click(function () {
 jQuery("#ticker").trigger("play");
 return false;
 });
 }

When the runul() animation is completed I would like to run the showVideo function. I want this function to fadeout the typed text and then fadein the iframe wrapped in a div.

 function showVideo() {
 $('#divFade').fadeOut(3000);
 animation_stopped = true;
 $(typetext).css('color', 'black');
 $("body").animate({ backgroundColor: "#ffffff" }, 3000);
 $('#divVideos').fadeIn('slow');
 // Animation complete.
 $("#iVideos").prop('src', 'Videos/Quick Start Intro_player.html');
 return false;
 };

How can I get the showVideo to run after the runul() is completed?

Thanks so much for your help

• devnull69: Does .ticker() provide any callback parameters that would help you to start certain actions after certain ticker actions have finished?
• devnull69: That would mean that .trigger("play") and .trigger("stop") would trigger some asynchronous action on the ticker, but the following code (including the callback proposed by @ftom2 below) would already run before this action finishes ...
• Sheri Trager: yes, that is what is happening. I just tried the when statement but that didn't run the runul either. $(document).ready(function () { dream(); $.when(runul()).then(function () { showVideo(); }); })
• devnull69: You'll have to create a deferred object inside runul(), return its promise() and then resolve the deferred in case of completion in order to make $.when().then() work
• Sheri Trager: Do you have an example of how I would implement this. I have tried several different ways with no luck. I am just learning jQuery so a real example from someone that knows what he's doing would really help. Thanks

Answer 1

You should pass 'showVideo' as a callback function:

setTimeout( function() {runul(showVideo)},8000);
function runul(callback) {
 jQuery("#ticker").ticker({
 cursorList: " ",
 rate: 50,
 delay: 18000
 }).trigger("play").trigger("stop");
 // Trigger events
 jQuery(".stop").click(function () {
 jQuery("#ticker").trigger("stop");
 return false;
 });
 jQuery(".play").click(function () {
 jQuery("#ticker").trigger("play");
 return false;
 });
 callback();
 }

You can also Use jquery defferred and in specific, the when function

• Sheri Trager: I tried the callback, but the showVideo runs while the runul() runs.
• Tomer: @SheriTrager - updated my answer, I've changed the setTimeout.
• Sheri Trager: I am just learning jQuery, do you have an example of using the defferred? Thanks
• Sheri Trager: I tried changing the settimeout as you suggested, now the runul() doesn't run. The text just shows instead of typing. I do really appreciate your help.
• Tomer: @devnull69 - you are right, didn't notice it, updated the answer