CODEWITHSUNDEEP
javascriptjqueryhtml
user1706537
user1706537

Reputation: 3

Running a Javascript function after a certain time

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?

Upvotes: 0

Views: 88

Answers (3)

dmcqu314
dmcqu314

Reputation: 875

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.

Upvotes: 0

We Are All Monica
We Are All Monica

Reputation: 13354

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

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

Note the () in showVideo2().

Upvotes: 3

Andreas Argelius
Andreas Argelius

Reputation: 3614

You can use setTimeout()

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

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

Upvotes: 0

Related Questions