在这种情况下如何setInterval()和removeInterval()？

Question

我知道为了删除一个间隔你需要一个存储的引用,所以我想我会在全局数组中存储函数返回.但是为什么当我点击一个单元格时,间隔会继续,只有一个停止(我看到第一个和最后一个单元格停止闪烁)？

我想要它做的是在表行的所有单元格(不包括第一个单元格)上附加连续淡入淡出,并且单击任何这些单元格的监听器将停止所有这些单元格上的动画.

到目前为止,这是我最好的努力(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]);
        }
    });
}

Answer 1

您正多次实例化interval数组并在for循环中递增错误的参数:

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

见:小提琴