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

您正在多次实例化区间数组并在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

Answer 2

你的另一个问题是：

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

每次都会创建一个新数组。您应该在声明时初始化间隔，并删除在if块中创建新数组的行：

var intervals = [];
...
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; intervals++) {
            window.clearInterval(intervals[i]);
        }

        // reset the array
        intervals = [];

    });
}

或用以下内容替换 for 循环：

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

停止间隔并一次性清除阵列。： - ）

在这种情况下如何setInterval（）和removeInterval（）？

2 个答案: