Javascript MVC：告诉控制器停止

我正在试验javascript和MVC模型。我想（简化的例子）将一个对象在屏幕上移动1到10之间的随机像素数，然后当它达到400像素时停止

设置

视图

是为了观察

模型

，该模型具有

notifyObservers（）

功能

单击

视图

上的开始按钮时，它会向

控制器发送一条
开始按钮点击
消息

controller.startButtonClicked = function () {

    var animate = function () {

        controller.getModel().shift();  // get the model and run the shift() function
        setTimeout(animate, 20);
    };

    animate();
}

这将运行
model
的
shift（）
功能：

model.shift = function () {

    if(model.x < 400) {
        model.x += Math.floor(Math.random()*11);  // Add up to 10 pixels
    }

    model.notifyObservers();  // Tells view to update, 
};

model.shift=函数（）{
if（型号x<400）{
model.x+=Math.floor（Math.random（）*11）；//总计10像素
}
model.notifyObservers（）；//通知视图进行更新，
};

这很好，对象应该在400像素左右停止。但是，
controller.startButtonClicked（）
中的setTimeout循环仍在呼啸而过

[编辑：据我所知，传统的MVC模型不允许
模型
直接与
控制器
通信，因此该模型不能仅仅告诉控制器停止计时器。]

因此，最后一个问题是：如何使控制器中的循环停止？

我想到的可能解决方案是：


让模型告诉视图，然后视图告诉控制器。但这似乎很冗长
让控制器询问模型是否完成。但这似乎与MVC结构背道而驰
获取
shift（）
函数，在完成后将
false
返回控制器

任何一个做过MVC一段时间的人都知道做MVC的正确方法是什么吗

谢谢
 您需要使用
clearTimeout（arg）
其中
arg
是
setTimeout
调用的返回值

另外，请注意setTimeout（）的低（<50）值，您所编写的调用每秒动画50次

controller.startButtonClicked = function () {

  var animate = function () {

    var m = controller.getModel();
    m.shift(controller);  // get the model and run the shift() 
    m.timerInterval = setTimeout(animate, 20);
  };

  animate();
}

model.shift = function () {

   if(model.x < 400) {
      model.x += Math.floor(Math.random()*11);  // Add up to 10 pixels
   }
   else if (model.timerInterval)
   {
     clearTimeout(model.timerInterval);
   }
   model.notifyObservers();  // Tells view to update, 
};

controller.startButtonClicked=函数（）{
var animate=函数（）{
var m=controller.getModel（）；
m、 shift（控制器）；//获取模型并运行shift（）
m、 timerInterval=设置超时（动画，20）；
};
制作动画（）；
}
model.shift=函数（）{
if（型号x<400）{
model.x+=Math.floor（Math.random（）*11）；//总计10像素
}
else if（model.timerInterval）
{
clearTimeout（model.timerInterval）；
}
model.notifyObservers（）；//通知视图进行更新，
};
类似这样的内容：

var t;  // feel free to make this a non global variable
controller.startButtonClicked = function () {

    var animate = function () {

        controller.getModel().shift();  // get the model and run the shift() function
        t = setTimeout(animate, 20);
    };

    animate();
}


model.shift = function () {

    if(model.x < 400) {
        model.x += Math.floor(Math.random()*11);  // Add up to 10 pixels
    }
    else { 
        clearTimeout(t);
    }

    model.notifyObservers();  // Tells view to update, 
};

var t；//请随意将其设置为非全局变量
controller.startButtonClicked=函数（）{
var animate=函数（）{
controller.getModel（）.shift（）；//获取模型并运行shift（）函数
t=设置超时（动画，20）；
};
制作动画（）；
}
model.shift=函数（）{
if（型号x<400）{
model.x+=Math.floor（Math.random（）*11）；//总计10像素
}
否则{
清除超时（t）；
}
model.notifyObservers（）；//通知视图进行更新，
};
据我所知，在标准MVC模型中，模型没有访问控制器的权限，因此这是不可能的。在这种情况下，在模型中填充setTimeout的返回值，即
var m=controller.getModel（）；m、 timerInterval=setTimeout（…）