我无法停止 setInterval

Question

我有两个buttons。 onClick 运行是一个使用 var intId = setInterval{function(), 30} 的函数在第二个 button 上，我尝试用 clearInterval(intId) 停止 setInterval，但是 intId 不是全局可行的，如果我将整个 setInterval 放在按钮功能之外，它就不能运行.

run button

var intID == 0;

function runButton() {
  var c = document.getElementById("can1");
  var ctx = c.getContext("2d");

  var speed = 2;
  var posX = 20;
  var posY = 20;

  var intID = setInterval(function() {
    posX += speed;
    ctx.clearRect(0, 0, c.width, c.height);

    ctx.fillStyle = "black";
    ctx.fillRect(posX, posY, 20, 20);

    if (intID == 1) {
        clearInterval(intID);
        }
  }
      , 30);

}

stop button

function stopButton() {
  var c = document.getElementById("can1");
  var ctx = c.getContext("2d");


  clearInterval(intID);
  intID == 1;

  ctx.clearRect(0, 0, c.width, c.height);
  c.style.backgroundColor = red;
}

Answer 1

尝试如下。

var intervalID = 1;

function runButton() {
  var c = document.getElementById("can1");
  var ctx = c.getContext("2d");

  var speed = 2;
  var posX = 20;
  var posY = 20;

  var intID = setInterval(function() {
    posX += speed; //variable 'x' had to change to 'posX'
    ctx.clearRect(0, 0, c.width, c.height);

    ctx.fillStyle = "black";
    ctx.fillRect(posX, posY, 20, 20);

    if(intervalID == 0) {
        clearInterval(intID);
    }
  }, 30);
}

function stopButton() {
  var c = document.getElementById("can1");
  var ctx = c.getContext("2d");

  intervalID = 0;

  ctx.clearRect(0, 0, c.width, c.height);
  c.style.backgroundColor = red;
}

我无法停止 setInterval

i can't stop setInterval

javascript

setinterval

clearinterval