30 秒计时器后调用的函数

Question

我正在使用 jquery 创建游戏，即将完成，但我需要最后一件事的帮助。我想制作一个 30 秒计时器，它在完成时调用一个函数。（想要它调用我如何创建这个？提前感谢所有帮助！

这是我的代码：

$(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);

另外请注意，请不要在您的代码中混用瑞典语和英语。尝试坚持使用英语并避免在 css- 规则和变量名称中使用“åäö”:)

Answer 2

按照@rymdmaskin 的建议使用超时，或者设置间隔：

function doSomething() {} 

var timer = setInterval(doSomething, 3 * 1000);
// some time later you may want to then:
clearInterval(timer);

或者，你提到它是为了游戏。您可能对 requestAnimationFrame 感兴趣：https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame

window.requestAnimationFrame(callback);

30 秒计时器后调用的函数

function called after 30 sec timer

html

javascript

jquery

timer

function-calls