Javascript 对象移动程序-无法使用“停止动画”按钮停止递归函数

我真正想做的是当按下按钮时，得到一个停止的形状。从现在开始，当用户按“动画”时，形状将继续向边界的右下角移动。我试图输入一个按钮，该按钮将停止由于递归移动函数而发生的动画。我曾尝试使用stopObj和stop函数，但没有一次尝试成功。如果有人知道我应该如何写这个函数，让动画停止它将不胜感激

以下是相关代码：

function setNewPosition(objID, dx, dy) { //This sets the new position of the     object

  var obj = getElement(objID);
  boundaryCheck(objID, dx, dy);
  var newleft = parseInt(obj.style.left) + dx;
  var newtop = parseInt(obj.style.top) + dy;
  obj.style.left = newleft.toString() + 'px';
  obj.style.top = newtop.toString() + 'px';

}

function shape(objID, canvasID, dx, dy, delay) {
  var thisShape = this;
  this.objID = objID;
  this.dx = dx;
  this.dy = dy;
 this.speedX = 0;
  this.speedY = 0;

  thisShape.draw = function() {
    drawShape(canvasID);
  }


  thisShape.move = function() {
    setNewPosition(objID, dx, dy);
    setTimeout(thisShape.move, delay);
  }
  thisShape.stop = function() {
      clearTimeout(thisShape.move);
  }
}
    function moveObj(id) { //starts process to move the shapes. 
  document.shapeObj[id].move();
}

function stopObj(id){
    document.shapeObj[id].stop();
}

正如我所说，问题区域与shape函数中的thisShape.move和thisShape.stop函数有关。当按下按钮时，我似乎无法让物体真正停止。

---

谢谢您的时间。

您正在呼叫

clearTimeout（thisShape.move）

但是

此形状.move

是

未定义的

，因为您的函数不返回任何内容

我相信有一种很好的方法可以使用递归函数来实现这一点，但是使用

setInterval（）

似乎要容易得多，它是为这类事情而设计的。您可以返回并保存间隔。然后，当您要停止时，将其传递给

stopInterval（）

，例如：

const delay=1000
函数形状（）{
此值为0.count；
this.startMove=（）=>this.moveInterval=setInterval（this.move，delay）；
this.move=（）=>{
log（“移动：”，this.count）
这个，伯爵++
}
this.stopMove=函数（）{
console.log（“停止”）
clearInterval（此.moveInterval）；
}
}
设sh=新形状（）
sh.startMove（）
函数停止（）{
sh.stopMove（）
}

---

欢迎来到SO-当你问问题时，你应该给出一个最小的、可验证的例子。我们不知道如何处理这些代码，我们没有编写它。访问以提高您的问题的质量。因为此任务特别是通过DOM使用所有函数，所以我需要复制问题的所有内容。如果我把有问题的函数拉出来，通过文本解释发生了什么会更好吗？我会把导致问题的具体代码放在帖子里，然后将所有内容链接到一个JSFIDLE，以便我们可以检查它并自己对代码进行测试。停止功能是特别需要工作的功能。我从未使用过JSFIDLE，所以现在我将对此进行研究。这是一本书。它在HTML中仍然有一行代码是我javascript的源代码，但是由于它是在短时间内发出通知的，我不知道如果没有它该如何在那里工作。