JavaScript多个时间间隔和clearInterval

Question

我有一个小程序，当您单击“条目”时，将打开编辑模式，而该条目是为其他人锁定的。每隔10秒就会发送一个ajax请求来更新表中的时间戳。

$(".entry-edit").click(function() {
  // code

  loopLockingVar = setInterval(function() { loopLockingFunction(id) }, 10000);

  // code
});

然后，我有一个取消按钮，将表中的时间戳更新为0并清除间隔。

$(".entry-cancel").click(function() {
  // code   

  clearInterval(loopLockingVar);

  // code
});

当仅编辑一个条目时，所有操作均有效，但是如果同时处理两个或多个条目，然后单击“取消”，则第一个条目的间隔会更远...

我试过了

var loopLockingVar;
$(".entry-edit").click(function() {
  // code

  if( ! loopLockingVar) {
    loopLockingVar = setInterval(function() { loopLockingFunction(id) }, 10000);
  }

  // code
});

但是，如果您取消并再次单击“编辑”，此方法将无法正常工作。

Answer 1

您正在为同一变量分配多个时间间隔ID，该变量将仅保留最后分配给它的时间间隔ID。当您清除间隔时，只会清除与该ID对应的间隔。

一个简单的解决方案是维护一个间隔ID数组，然后清除该数组中表示的所有间隔。代码看起来像这样：

var intervalIds = [];

$(".entry-edit").click(function() {
    intervalIds.push(setInterval(function() { loopLockingFunction(id) }, 10000));
});

$(".entry-cancel").click(function() {
    for (var i=0; i < intervalIds.length; i++) {
        clearInterval(intervalIds[i]);
    }
});