如何重用此 JavaScript 超时关闭？

Question

我发现了以下一段 JavaScript 代码（也许在 Stack Overflow 上？）用于实现超时：

var delay = (function() {
  var timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();

我是 JavaScript 新手，所以我仍在尝试解决闭包问题。如果我在一个地方调用 delay(firstCallback, 200) ，然后立即调用 delay(secondCallback, 200) ，第一个超时回调将被清除，而第二个回调将成功执行。

如何在不同实例中重用delay而不覆盖其他实例？ （不确定这些术语是否正确，但希望它能表达我的观点。）因此，在上面的示例中，我希望两个回调都执行。

感谢您的帮助！

编辑：作为一个实际的例子，我试图在输入字段上缓冲按键事件，以便回调仅在 200 毫秒内没有按下任何按键后执行。但我有多个输入字段，当前当两个输入字段快速连续发生按键事件时缓冲区会中断。

Answer 1

要重用它，更容易摆脱匿名函数并将其用作生成器。

var createDelayManager = function() {
  var timer = 0;
  return function(callback, ms) {
     clearTimeout(timer);
     timer = setTimeout(callback, ms);
  };
}


var delayManagerOne = createDelayManager();
delayManagerOne(firstCallback, 200);

var delayManagerTwo = createDelayManager();
delayManagerTwo(secondCallback, 200);

这是一个工作小提琴：
http://jsfiddle.net/HJrM7/

但是，值得注意的是，这个关闭的目的是以防止多个回调针对某个对象堆积。这是一个非常好的闭包，它使您能够确保最后触发的事件将是被执行的事件。我经常使用这种技术来防止闪烁或在重绘期间不需要的鼠标移出事件。

Answer 2

您正在寻找

Delay = function(callback, ms) {
    this.callback = callback;
    this.ms = ms;
};

Delay.prototype = {
    timer: -1,

    restart: function() {
        if (this.timer != -1) clearTimeout(this.timer);
        this.timer = setTimeout(this.callback, this.ms);
    }
};

var delay1 = new Delay(callback1, 100);
var delay2 = new Delay(callback2, 100);

// on some event1
delay1.restart();

// on some event2
delay2.restart();

jsfiddle 上的示例： http://jsfiddle.net/TF9Tw/1/

Answer 3

闭包保存在内部函数调用之间持续存在的状态。在本例中使用它，因此一次只有一次超时。如果您希望一次有多个超时可用，您可以只编写

setTimeout(callback, ms);

编辑：

对于您的示例，最好的解决方案是制作一个像这样的对象

function DelayManager(){}
DelayManager.prototype.timer = 0;
DelayManager.prototype.delay = function(callback, ms) {
  clearTimeout(this.timer);             
  this.timer = setTimeout(callback, ms);   
}
someDelayManager = new DelayManager();

，而不是 someDelayManager 您将使用每个输入元素唯一的某个对象的成员变量。如需增加延迟，您可以致电。

someDelayManager.delay(callback, ms);