function called after 30 sec timer

Question

i am creating a game with jquery, almost done but i need help with one last thing. I want to make a 30 seconds timer, that calls a function when its done.( Want it to call How can i create this? Thanks in advance for all help!

Here is my code:

$(document).ready(function(){


  var score=0;
  var fails=0;

  //Bucket movement
  $(document).keydown(function(e){ 
    //console.log(e.which);

    // if left or right keyboard arrow
    if (e.keyCode ==39 && $("#spelare").css("left") < '880px')  
      $("#spelare").animate({left: '+=20px'}, 0);
    else if (e.keyCode ==37 && $("#spelare").css("left") > '0px') 
      $("#spelare").animate({left: '-=20px'}, 0);  
  });


  // Game init
  var spanfoodInterval = setInterval(spawnFood,2000);
  var fallInterval = setInterval(fall, 0);


  // Water append
  function spawnFood(){
    var spelplanWidth = $('#spelplan').width();
    var randPosX = Math.floor((Math.random()*spelplanWidth));
    var element = $("<div class='food'></div>").css('left',randPosX).css('bottom', '446px');
    $("#spelplan").append(element);
  }

  // dropping object animation
  function fall(){
    var elementFall = $(".food").animate({top: '+=20px'}, 500);
    //$("#spelplan").append(elementFall);

    $(".food").each(function(){

      if( typeof($(this)) !="undefined" && typeof($("#spelare"))!="undefined" ){

        // item position
        var thisPosition = $(this).position();
        var thisWidth = $(this).width();

        // Bucket position and width
        var bucketPosition = $("#spelare").position();
        var bucketWidth = $("#spelare").width();
        var bucketHeight = $("#spelare").height();


        // If object and bucket at same position
        if( thisPosition.top >= bucketPosition.top 
           && thisPosition.left >= bucketPosition.left
           && thisPosition.left <= bucketPosition.left + bucketWidth ){

          $(this).remove();
          score++;
          //console.log(score);

          // Update the score display
          $("#poäng").html("Poäng: " + score);
          $("#failMsg").html("Game Over!" <br/ + "Totala Poäng: " + score);
        }

        // Food not catched...
        if( thisPosition.top >= bucketPosition.top + bucketHeight){
          $(this).remove();
          fails++;
          //console.log("FAILS: "+fails);
        }

        // if more than 3 miss => Game over.
        if(fails >= 3){

          $("#failMsg").show();
          $("#spelare").remove();
          $(".food").remove();
          clearInterval(spanfoodInterval);
          clearInterval(fallInterval);
        }
      }
    });
  }


});

body{
            text-align: center;
            background-color:black;
        }

        #spelplan{
            width: 1000px;
            height:610px;
            position:absolute;
            margin-left:460px;
            box-shadow: inset 0px 0px 50px;
             background-color: green;
        }
        #spelare{
            width:110px;
            height: 12vh;
            position: relative;
            top:53.4vh;
            background-color:blue;

        }


        .food{
            width:50px;
            height:50px;
            position:absolute;
            background-color:yellow;
            display:block;
        }

        p{
            position:relative;
            font-family: 'Electrolize', sans-serif;
        }

        #poäng{
             color:white;
            bottom:14vh;
            right:45%;
        }

        #liv{
            color:white;
            bottom:15vh;
            right:46.5%;
        }

        .fa-heart{
            color:red;
            bottom:18.5vh;
            right:43.5%;
            position:relative;
        }

        #info{
            color:white;
            font-family: 'Electrolize', sans-serif;
            margin-top:68vh;

        }

        #failMsg{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(50% 50%);
  color:white;
  font-size:4em;
  display:none;
}

      #successMsg{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(50% 50%);
  color:white;
  font-size:4em;
  display:none;
}

<h2 style="color:white">JQUERY SPEL</h2>
<div id="spelplan">
 <div id="spelare"> </div>
<div class="food"> </div>
<p id="poäng"> Poäng:   </p> 
<p id="liv"> Liv: </p>
<i class="fa fa-heart" aria-hidden="true"></i>
</div>

<div id="info"> 
<h1> Instruktioner: </h1>
<p> Spelet går ut på att du med hjälp av hinken och piltangenterna ska fånga alla vattendroppar! <br/> Du måste hålla ut i 40 sekunder, missa tre vattendroppar så förlorar du!  </p>
</div>
<div id="failMsg">Game over!</div>
<div id="successMsg"> You won! </div>

Answer 1

function foo(){
 //Your function that you want to call
}

//30000ms = 30s
setTimeout(foo, 30000);

---

On another note, please do not mix Swedish and English in your code. Try to stick to english and avoid "åäö" in your css-rules and variable names :)