JavaScript 多个间隔和clearInterval

我有一个小程序，当你点击一个“条目”时，编辑模式被打开，并且该条目是为其他人锁定的编辑。每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
});

但是，如果您取消并再次单击“编辑”，这将不起作用......

您将多个间隔 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]);
    }
});