一定时间后运行Javascript函数

Question

I am new to programming and javascript.

What I want to do : Javascript function running on pageload, in this case showVideo(). I want to run this function for a say 10 seconds and then move to the next function.

function(){
     dostuff();
  // dostuff for 10 seconds
  // now stop dostuff
  // donewstuff();
}  

    <div class="wrapper">
        <div class="screen" id="screen-1" data-video="vid/river.mp4">
            <img src="img/bird.jpg" class="big-image" />
        </div>
        <div class="screen" id="screen-2" data-video="vid/sim.mp4">
            <img src="img/spider.jpg" class="big-image" />
        </div>
    </div>
        </div>

<script>
        $(function(){
            var 
                BV,
                videoPlayer,
                BV = new $.BigVideo();
                BV.init();
                showVideo();
                BV.getPlayer();



            function showVideo() {
                BV.show($('#screen-1').attr('data-video'),{ambient:true});
                $('#screen-1').find('.big-image').transit({'opacity':0},500)
                setTimeout(function(){showVideo2},40000);
            }
            function showVideo2() {
                BV.show($('#screen-2').attr('data-video'),{ambient:true});
                $('#screen-2').find('.big-image').transit({'opacity':0},500)
            }

I tried :

setTimeout(function(){showVideo2},40000) 

but it did not work. Any ideas?

Answer 1

You didn't actually call the function. Try this:

setTimeout(function() {
    showVideo2();
}, 40000);

Note the () in showVideo2() .

Answer 2

You can use setTimeout()

var stopped = false;
setTimeout(function() {
  stopped = true;
}, 10000);

while (!stopped) {
  // Do stuff here.
}

Answer 3

My guess is that you would like to invoke showVideo and then 40s later invoke showVideo2. What you have is close, however you are not invoking showVideo2 in your timeout.

You have two solutions that would fix it:

Change

        function showVideo() {
            BV.show($('#screen-1').attr('data-video'),{ambient:true});
            $('#screen-1').find('.big-image').transit({'opacity':0},500)
            setTimeout(function(){showVideo2},40000);
        }

To either:

        function showVideo() {
            BV.show($('#screen-1').attr('data-video'),{ambient:true});
            $('#screen-1').find('.big-image').transit({'opacity':0},500)
            setTimeout(showVideo2,40000);
        }

or:

        function showVideo() {
            BV.show($('#screen-1').attr('data-video'),{ambient:true});
            $('#screen-1').find('.big-image').transit({'opacity':0},500)
            setTimeout(function(){showVideo2(); },40000);
        }

Without testing this should work. Please comment if you have any questions.