Question

我真正想要完成的是在按下按钮时让形状停止。截至目前，当用户按下动画时，形状将继续朝向边界的右下方。我正在尝试输入一个按钮，该按钮将停止由于递归移动功能而发生的动画。我正在尝试使用stopObj和stop函数，但我没有尝试过。如果有人知道我应该如何编写这个函数来让动画停止它将非常感激。

以下是相关代码：

manifest.json

就像我说的那样，故障区域与形状函数内的thisShape.move和thisShape.stop函数有关。当按下按钮时，我似乎无法让对象实际停止。谢谢你的时间。

Answer 1

您正在呼叫clearTimeout(thisShape.move);，但thisShape.move为undefined，因为您的功能不会返回任何内容。

我确信使用递归函数可以很好地实现这一点，但使用专为此类事情设计的setInterval()似乎更容易。您可以返回并保存间隔。然后，当您想要停止时，将其传递给stopInterval()例如：

const delay = 1000

function Shape() {
  this.count = 0;
  this.startMove = () => this.moveInterval = setInterval(this.move, delay);

  this.move = () => {
    console.log("moving: ", this.count)
    this.count++
  }

  this.stopMove = function() {
    console.log("stopping")
    clearInterval(this.moveInterval);
  }
}
let sh = new Shape()
sh.startMove()

function stop() {
  sh.stopMove()
}

<input type="button" onclick=stop() value="stop">

（p.s。我将你的函数声明转换为箭头=>函数，以允许在回调中使用this并使代码更清晰。）

对象移动程序 - 麻烦获取停止动画按钮以停止递归功能

1 个答案: