MVC：告诉控制器停止

Question

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

view 设置为观察 model，它具有 notifyObservers() 函数。

当单击视图上的开始按钮时，它会向控制器发送一条startButtonClicked消息。

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, 
};

效果很好，并且对象按其应有的方式停止在 400 像素左右。然而，controller.startButtonClicked() 中的 setTimeout 循环仍然在嗡嗡作响。

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

所以，最后的问题是：如何使控制器中的循环停止？

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

• 让模型告诉视图，然后视图告诉视图控制器。但这似乎很啰嗦。
• 让控制器询问模型是否完成。但这似乎违背了MVC结构。
• 获取 shift() 函数以在完成时向控制器返回 false。

任何使用 MVC 一段时间的人都知道正确的做法是什么吗？

谢谢！

Answer 1

像这样的东西：

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, 
};

Answer 2

您需要使用 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, 
};