使用setTimeout调用函数并使用可选方法来停止一个

I have a function which runs a maths calculation with a callback. I use this function to do calculations for more than one thing by calling it more than once while the previous call may still be processing. (I use setTimeout to do calculations).

我有一个函数，它使用回调运行数学计算。我使用此函数通过多次调用它来执行多个计算，而前一个调用可能仍在处理中。 （我使用setTimeout进行计算）。

The problem is, some times, I need to cancel one of the functions running prematurely.

问题是，有时候，我需要取消其中一个过早运行的功能。

For example... a user clicks an object on a canvas, and the canvas auto zooms in and pans to focus on that object. But the user could mouse wheel to cancel the zoom automation, whilst the panning is still going, i hope that made sense and can understand why I might need to cancel one action but not another.

例如......用户单击画布上的对象，画布自动放大并平移以关注该对象。但是用户可以使用鼠标滚轮来取消变焦自动化，而平移仍在进行中，我希望这是有道理的，并且可以理解为什么我可能需要取消一个动作而不是另一个动作。

This is my code setup:

这是我的代码设置：

var maths = new function() {
  var self = this;

  self.process = function(start, target, duration, callback) {
    var vector = (target - start) / duration;
    var startTime = Date.now();

    function update() {
      start += vector * (Date.now() - startTime);
      startTime = Date.now();

      if (start < target) {
        self.timer = setTimeout(update, 0);
      }
      callback(start);
    }
    update();
  }
};

maths.process(0, 10, 5000, function(value) {
  console.log('Run 1:' + value);
});
maths.process(-5, -1, 5000, function(value) {
  console.log('Run 2: ' + value);
});

So i am wondering, how would I be able to obtain a way here to cancel a specific function run when I need to, should I need to.

所以我想知道，如果需要的话，我怎么能在这里获得一个取消特定功能的方法呢？

I am having a difficult time trying to figure out what is a simple way to manage it so it is easy to cancel either call.

我正在努力弄清楚什么是管理它的简单方法，因此很容易取消任一调用。

1 个解决方案

#1

I guess what you want can be accomplished like this (though honestly, I'm not sure I understood you correctly :-):

我想你想要的就是这样完成的（虽然老实说，我不确定我是否正确理解你:-)：

var maths = new function() {
  var self = this;

  self.process = function(start, target, duration, callback) {
    var vector = (target - start) / duration;
    var startTime = Date.now();
    var didCancel = false;

    function update() {
      if(didCancel) {
        return;
      }
      start += vector * (Date.now() - startTime);
      startTime = Date.now();

      if (start < target) {
        self.timer = setTimeout(update, 0);
      }
      callback(start);
    }
    update();
    return {cancel: function() {didCancel = true;}};
  }
};

var prc1 = maths.process(0, 10, 5000, function(value) {
  console.log('Run 1:' + value);
});
var prc2 = maths.process(-5, -1, 5000, function(value) {
  console.log('Run 2: ' + value);
});

setTimeout(prc1.cancel, 500);