JavaScript multiple intervals and clearInterval

Question

I have a small program, when you click on an "entry", the editing mode is opened, and the entry is to edit locked for others. There is every 10 seconds sends an ajax request to update the timestamp in the table.

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

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

  // code
});

Then I have a cancel button to updating the timestamp in the table to 0 and to clear the interval.

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

  clearInterval(loopLockingVar);

  // code
});

It all works when editing only one entry, but if two or more processed simultaneously, and then click cancel, the interval for the first entry still further...

I have this tried:

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

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

  // code
});

However, this does not work more if you cancel and again clicks on edit...

Please include your HTML as well. It would be better is you could reproduce your problem on jsFiddle or jsBin. — Rahul Desai, Nov 26 '14 at 08:45

Robby Cornelissen · Accepted Answer · 2014-11-26T08:53:14.817

8

You're assigning multiple interval IDs to the same variable which will only hold the interval ID that was assigned to it last. When you clear the interval, only the interval corresponding to that ID will be cleared.

A straightforward solution would be to maintain an array of interval IDs, and then clear all intervals represented in the array. The code could look something like this:

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

edited Nov 26 '14 at 08:53

answered Nov 26 '14 at 08:45

Robby Cornelissen

91,784
22
134
156

Why is that the case? Isn't he overwriting intervals and only the last one is set in the first place? – Alexus Nov 26 '14 at 08:46
@Alexus A new interval is created every time and that its ID is assigned to the variable. The interval itself is not overwritten, only the interval ID value of the variable. – Robby Cornelissen Nov 26 '14 at 08:48
So you mean variable is only a pointer to the intervals and can be used to unset the interval, however, once pointer is changed, the interval will still keep executing? – Alexus Nov 26 '14 at 08:50
@Alexus Indeed. It's actually the interval ID that is assigned to the variable, not even the interval object itself. – Robby Cornelissen Nov 26 '14 at 08:51
Which essentially is some sort of a handle... once removed handle doesn't change the actual object(interval). Good info. Thanks :) – Alexus Nov 26 '14 at 08:51
1

Yeah thanks for the tip! But i need make a object hash. If i clear all values in the array, ALL intervals removed – nutzt Nov 26 '14 at 09:02

score 0 · Answer 2 · edited Nov 26 '14 at 08:54

0

maybe you can try like this.

var loopLockingVar;

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

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

  // code
});

edited Nov 26 '14 at 08:54

Oleksandr T.

76,493
17
173
144

answered Nov 26 '14 at 08:53

zzjyingzi17

1

JavaScript multiple intervals and clearInterval

2 Answers2

Linked