javascript - 如何将未指定数量的参数传递给 setInterval

Question

我需要创建一个间隔包装器来跟踪它是否已被清除。

传递给间隔回调的参数数量应该是可变的。所以这是我用来测试它的代码(不工作):

function MyInterval() {
  var id = setInterval.apply(this, arguments); // NOT VALID!!
  this.cleared = false;
  this.clear = function() {
    this.cleared = true;
    clearInterval(id);
  };
}

var x = 2;
var y = 3;
var fn = function() {
  x = x + y;
  console.log(x);
};
var interval = new MyInterval(fn, 5000, x, y);

Answer 1

在对 setInterval 的调用中, this必须引用全局对象，所以不是 this ，你想要window在你的构造函数中:

var id = setInterval.apply(window, arguments);
// here -------------------^

(或者在宽松模式下你可以使用 undefined 或 null 。)

然后它就可以工作了，至少在 setInterval 的浏览器上是这样。是一个真正的 JavaScript 函数，因此有 apply :

function MyInterval() {
  var id = setInterval.apply(window, arguments);
  this.cleared = false;
  this.clear = function() {
    this.cleared = true;
    clearInterval(id);
  };
}

var x = 2;
var y = 3;
var fn = function() {
  x = x + y;
  log(x);
};
var interval = new MyInterval(fn, 500, x, y);
setTimeout(function() {
  interval.clear();
}, 3000);

function log(msg) {
  var p = document.createElement('p');
  p.appendChild(document.createTextNode(msg));
  document.body.appendChild(p);
}

请注意，不过，主机提供的函数只需要可调用，它们不需要继承自 Function.prototype所以他们不需要/保证有apply .现代浏览器确保它们这样做，但早期的浏览器(例如 IE8)没有。我不能说支持有多好apply在setInterval .

如果你需要支持可能没有它的浏览器，只需使用你自己的功能:

function MyInterval(handler, interval) {
  var args = Array.prototype.slice.call(arguments, 2);
  var tick = function() {
    handler.apply(undefined, args);
  };
  var id = setInterval(tick, interval);
  this.cleared = false;
  this.clear = function() {
    this.cleared = true;
    clearInterval(id);
  };
}

这还有一个优点，即它甚至可以在不支持 setInterval 上的附加参数的浏览器上运行(相当老的)。

例子:

function MyInterval(handler, interval) {
  var args = Array.prototype.slice.call(arguments, 2);
  var tick = function() {
    handler.apply(undefined, args);
  };
  var id = setInterval(tick, interval);
  this.cleared = false;
  this.clear = function() {
    this.cleared = true;
    clearInterval(id);
  };
}

var x = 2;
var y = 3;
var fn = function() {
  x = x + y;
  log(x);
};
var interval = new MyInterval(fn, 500, x, y);
setTimeout(function() {
  interval.clear();
}, 3000);

function log(msg) {
  var p = document.createElement('p');
  p.appendChild(document.createTextNode(msg));
  document.body.appendChild(p);
}

您可能想使用新的 ES2015 传播运算符:

var id = setInterval(...arguments);

...但请注意，如果您转译(现在您必须转译)，它最终会变成一个 apply。打电话，所以你有是否apply的问题支持。