时间戳

首页 > 解决方案 > 如何在按下按钮时开始 setInterval 而不会破坏 clearInterval 内部功能？

javascript - 如何在按下按钮时开始 setInterval 而不会破坏 clearInterval 内部功能？

问题描述

我有一个 setInterval 来绘制我的蛇游戏，每次蛇“吃”我都有一个 clearInterval，然后是 setInterval var 并调整了速度。原始 setInterval 在加载时开始。我怎样才能让它从按下按钮开始？

我尝试将 setInterval 放在按钮内并使用函数使按钮启动 setInterval，但它总是会破坏我在绘图函数中的 clearInterval。

<button onclick="">Start game</button>


if (snakeX == food.x && snakeY == food.y){
            food = {
                x : Math.round(Math.random()*(cvsWidth/snakeWidth-1)),
                y : Math.round(Math.random()*(cvsHeight/snakeHeight-1))
            };
            score++;
            if (speed >= 40) speed = speed-3;
            clearInterval(interval);
            interval = setInterval(draw, speed);
        }else{

            //Remove last
            snake.pop();
        }

var speed = 140;

var interval = setInterval(draw, speed);

标签： javascripthtmlbuttonsetintervalclearinterval

解决方案

通过将按钮的onclick属性设置为单击按钮时要调用的start()原因。start

我还声明interval为全局变量，因为我认为您需要它是全局的。

然后当 start 被调用时，间隔开始，间隔的 id 被放入interval

var speed = 500;

function draw() {
  console.log("Running")
}


var interval;
function start() {
  //Prevent start from running twice.
  if(interval != null) return;
  interval = setInterval(draw, speed);

}
<button onclick="start()">Start game</button>

推荐阅读