javascript - 10 秒后停止执行 javascript/jquery

Question

我正在用 javascript 开发一个简单的游戏，只是为了学习 jquery 和动画，这个游戏非常简单，只需击打几个弹跳球。

$(document).ready(function() { 
        $('#stage').bind('click',function(e){ 
        $("#bomb").show(); 
        var x = e.clientX - this.offsetLeft -35 ;
        var y = e.clientY - this.offsetTop -35 ;
        $("#bomb").animate({left:x,top:y}, 200, function(){
        $("#bomb").hide(); 
        $("#bomb").css({ top: "365px",left:"240px"});
        $("#bomb").show(); 
                         });    
        }); 
                $("#box1").click(function() {hit("#box1");})
                $("#box2").click(function() {hit("#box2");})
                $("#box3").click(function() {hit("#box3");})


        });

我想在 10 秒后停止执行，但我不知道如何做到这一点，我做了一个简单的 setTimeout，但是当我单击(并触发绑定(bind)方法)时，计数器会自行停止。 .. 有什么建议吗？计数器的代码是:

var counter=setInterval(timer, 10000);
         function timer()
        { count=count-1;
        if (count < timeout)
    {   clearInterval(counter);
        imageUrl="img/BGgameover.gif"; 
        $('#stage').css('background-image', 'url(' + imageUrl + ')'); 
        $('#bomb').remove();  
        $('#stage').removeClass('running');
        return;
                        }
        document.getElementById("timer").innerHTML=count;
            }

Answer 1

您的计数器停止，因为您只运行代码每 10 秒更新一次。

您正在使用具有 10000 毫秒延迟的 setInterval，因此每 10 秒调用一次 timer 函数，我认为您应该改用 1 秒的间隔。

以下代码将每秒运行一次，因此“timer”div 将更新剩余的秒数，然后当 count 小于 timeout 时，游戏结束代码将运行。

var counter = setInterval(timer, 1000);

// Make sure "count" and "timeout" are sane values. What are they defined to initially?

function timer() { 
  count = count - 1;

  if (count < timeout) {   
    clearInterval(counter);
    imageUrl = "img/BGgameover.gif"; 

    $('#stage').css('background-image', 'url(' + imageUrl + ')'); 
    $('#bomb').remove();
    $('#stage').removeClass('running');
    return;
  }

  document.getElementById("timer").innerHTML = count;
}

附带说明一下，使用 setInterval 可能有点不可靠，您可能需要考虑使用 requestAnimationFrame:http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/