javascript 设置超时后的jquery运行功能

jquery run function after settimeout

提问by Sheri Trager

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.

当 Dream 函数运行时，我运行 runul() 函数，它开始输入文本。

 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.

当 runul() 动画完成时，我想运行 showVideo 函数。我希望这个函数淡出输入的文本，然后淡入包裹在 div 中的 iframe。

 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?

如何在 runul() 完成后让 showVideo 运行？

Thanks so much for your help

非常感谢你的帮助

回答by Tomer

You should pass 'showVideo' as a callback function:

您应该将“showVideo”作为回调函数传递：

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 defferredand in specific, the whenfunction

您还可以使用 jquery deferred，特别是when函数