javascript - 使用 setTimeout 调用函数，并以可选方式停止一个

Question

我有一个函数，它通过回调运行数学计算。我使用此函数通过多次调用它来进行不止一件事的计算，而前一个调用可能仍在处理中。 (我使用setTimeout来做计算)。

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

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

这是我的代码设置:

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

所以我想知道，如果我需要的话，我如何能够在这里获得一种方法来取消特定函数的运行。

我很难找出管理它的简单方法，以便轻松取消任一调用。

Answer 1

我想你想要的可以这样完成(尽管老实说，我不确定我是否正确理解你:-):

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);