CODEWITHSUNDEEP
javascriptjquery
kacpr
kacpr

Reputation: 392

How to setInterval() and removeInterval() in this situation?

I understand that in order to remove an interval you need a stored reference to it, so I figured I'll store function returns in a global array. But why when I click on a cell the intervals keep going and only one stops (I saw first and last cell to stop flashing)?

What I wanted it to do is append a continuous fadeTo on all cells of a table row (excluding first one), and a listener that on clicking any of these cells would stop animations on all of them.

Here's my best effort so far (jsfiddle):

var intervals;
var target = $('#table');
var qty = target.find('td:contains(Price)');
var row = qty.closest('tr');
arr = new Array();
row.find('td').each( function() {
if ($(this).text() !== "Price" ) {
    intervals = new Array();
    addAnimation($(this));
    }
});
function addAnimation(cell) {
    var intv = setInterval(function() {
        cell.fadeTo("slow", 0.3);
        cell.fadeTo("slow", 1);
    }, 1000);
    intervals.push(intv);
    cell.click(function() {
        for (var i = 0; i < intervals.length; intervals++) {
            window.clearInterval(intervals[i]);
        }
    });
}

Upvotes: 2

Views: 7783

Answers (2)

mhu
mhu

Reputation: 18051

You are instantiating the intervals array multiple times and incrementing the wrong parameter in the for loop:

var intervals = [],
    target = $('#table'),
    qty = target.find('td:contains(Price)'),
    row = qty.closest('tr');

row.find('td').each( function() {
    if ($(this).text() !== "Price" ) {
        addAnimation($(this));
    }
});

function addAnimation(cell) {
    var intv = setInterval(function() {
        cell.fadeTo("slow", 0.3);
        cell.fadeTo("slow", 1);
    }, 1000);
    intervals.push(intv);

    cell.click(function() {
        for (var i = 0; i < intervals.length; i++) {
            window.clearInterval(intervals[i]);
        }
        $(this).stop();
    });
}

See: fiddle

Upvotes: 9

RobG
RobG

Reputation: 147413

Your other problem is here:

var intervals;
...
if ($(this).text() !== "Price" ) {
    intervals = new Array();
    addAnimation($(this));

That creates a new array each time. You should be initialising intervals when you declare it and delete the line creating a new array in the if block:

var intervals = [];
...
if ($(this).text() !== "Price" ) {
    addAnimation($(this));
}

However, you may wish to run this more than once, so you should clear out the array when you clear the intervals, something like:

function addAnimation(cell) {
    var intv = setInterval(function() {
        cell.fadeTo("slow", 0.3);
        cell.fadeTo("slow", 1);
    }, 1000);
    intervals.push(intv);
    cell.click(function() {
        for (var i = 0; i < intervals.length; intervals++) {
            window.clearInterval(intervals[i]);
        }

        // reset the array
        intervals = [];

    });
}

or replace the for loop with something like:

  while (intervals.length) {
    window.clearInterval(intervals.pop());
  }

which stops the intervals and clears the array in one go. :-)

Upvotes: 2

Related Questions