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

Does .ticker() provide any callback parameters that would help you to start certain actions after certain ticker actions have finished? — devnull69
– devnull69, Commented Nov 13, 2012 at 15:45
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 ... — devnull69
– devnull69, Commented Nov 13, 2012 at 15:57
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(); }); }); — Sheri Trager
– Sheri Trager, Commented Nov 13, 2012 at 16:03
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 — devnull69
– devnull69, Commented Nov 13, 2012 at 16:04
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 — Sheri Trager
– Sheri Trager, Commented Nov 13, 2012 at 16:09

Tomer · Accepted Answer · 2012-11-13 15:59:52Z

4

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

edited Nov 13, 2012 at 15:59

answered Nov 13, 2012 at 15:35

Tomer

17.9k17 gold badges82 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sheri Trager Over a year ago

I tried the callback, but the showVideo runs while the runul() runs.

Tomer Over a year ago

@SheriTrager - updated my answer, I've changed the setTimeout.

Sheri Trager Over a year ago

I am just learning jQuery, do you have an example of using the defferred? Thanks

Sheri Trager Over a year ago

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 Over a year ago

@devnull69 - you are right, didn't notice it, updated the answer

|

Collectives™ on Stack Overflow

jquery run function after settimeout

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related