将 setIntervals 与 .each() 元素链接答案

【问题标题】：Link setIntervals with .each() element将 setIntervals 与 .each() 元素链接
【发布时间】：2015-12-13 21:11:03
【问题描述】：

这个问题和这个Clear all setIntervals有关

我像这样在每个函数中使用 setIntervals，

var allIntervals = [];
$(".elements").each(function() {
    var myInterval = setInterval(function() {
        // code that changes $(this)
    });
   allIntervals.push(myInterval);
});

然后我像这样清除所有间隔

jQuery.each(allIntervals, function(index) {
    window.clearInterval(allIntervals[index]);
});

我现在意识到我想清除不再在 DOM 中的元素的间隔。

那么如何将 setIntervals 链接到 each() 元素，然后检查该元素是否仍在 DOM 中，如果没有，则清除与该元素关联的 Interval？

【问题讨论】：

stackoverflow.com/questions/3086068/…
为什么不清除所有区间然后根据当前dom重置？
allIntervals.push({ element: $(this), interval: setInterval(...) }); - window.clearInterval(allIntervals[index].interval);

标签： javascript jquery html setinterval

【解决方案1】：

您可以将具有超时 ID 的元素存储在一个对象中，但您必须再次检查它是否在 DOM 中，因为存储的元素不会神奇地从变量中消失，它只是不再在DOM。

var allIntervals = [];

$(".elements").each(function(i, el) {
    var myInterval = setInterval(function() {
        // stuff
    }, 1000);
   allIntervals.push({id : myInterval, elem : this});
});


$.each(allIntervals, function(index, item) {
    if ( $(document).find(item.elem).length === 0 ) window.clearInterval(item.id);
});

FIDDLE

【讨论】：

我在控制台中看到它返回 5，尽管它没有被删除
这似乎对我不起作用。 “再次检查”是什么意思？
我的意思是如果你将一个元素存储在一个变量中，然后用remove()从DOM中删除该元素，该元素仍然存在于变量中，只是不在DOM中，见@987654322 @。必须再次实际查询 DOM 以检查元素是否已消失。此外，您在该小提琴的控制台中看到的是索引，它是从零开始的，所以它与我在 DIV 中添加的数字不匹配，我应该让它更加一致，就像这样 -> jsfiddle.net/v9rLqc9v/1
它现在对我有用。那么如果元素正确，你会建议我从变量中删除对象吗？我该怎么做呢？拼接会是这样吗？我将如何定位不需要的对象并将其删除？
那么清理数组可能也是个好主意，您可以为此使用过滤器 -> jsfiddle.net/v9rLqc9v/2

【解决方案2】：

使用一个对象来存储信息（以元素和intervalid为属性），遍历对象并在DOM元素不可用时清除间隔。

$(function() {

  var intervals = [];

  $(".elements").each(function() {
    var myInterval = setInterval(function() {
      // code that changes $(this)
    });
    var obj = new Object();
    obj.element = $(this);
    obj.intervalId = myInterval;

    intervals.push(obj);
  });

  $.each(intervals, function(index, val) {
     console.log(val.element);
     if (val.element.length > 0) {
         window.clearInterval(val.intervalId);
     }
  });
});

【讨论】：