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

Question

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

我想要它做的是在表格行的所有单元格(不包括第一个单元格)上附加一个连续的 fadeTo，以及一个监听器，单击这些单元格中的任何一个都会停止所有单元格上的动画。

这是我迄今为止所做的最大努力( 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

您多次实例化间隔数组并在 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();
    });
}

参见:fiddle