如何使用循环索引保存/清除setTimeout的数组？

Question

我多次调用for循环。 我想为每个索引保存一个setTimeout。 这个想法是使用循环的索引作为setTimeout的数组索引，但是setTimeout返回一个递增的ID号，我想重置它，或者重写以控制返回的ID，因此我可以始终使用给定的索引标识每个超时在一次又一次执行的循环索引范围内。 以后可以将clearTimeout与特定索引一起使用。

var timeouts = [];
for(var i=0; i < 5 ; i++) {
   ...
   (function(delay, timeouts, i){
      // Keeps a reference of the timeout to clear it later.
      timeouts[i] = setTimeout(function() {
         countInView--;
      }, delay);
      console.log("i: "+5+ " | timeout: "+timeouts[i]);
      // i: 5 | timeout: 25 -> Surpasses index, 
      // I'd like to override positions by ID or by index.
   }(delay, timeouts, i));
   ...
}

1. 当循环执行不止一次时， timeouts[i]值将超过循环索引的值：

2. 我只想清除代码其他部分的超时，但是到达代码的这一部分时， timeouts[i]的值可能是140，而循环i值只有3，所以我永远无法清除第3个（也不任何）打算保存的setTimeout：

    clearTimeout(timeouts[i]); 

Answer 1

您可以为此使用2维数组，第一个维将与for循环索引一起更改，而第二个维可以保留为0以控制每次迭代分配的超时ID。

用于将setTimeout保存在循环中的索引中

var timeouts = []; // Two  dimensional array
for (i = 0; i < 5; i++)  
    timeouts[i] = [];

for(var i=0; i < 5 ; i++) {
    ...
    (function(delay, $element, savedtimeout){
        savedtimeout[0] = setTimeout(function() {
            countInView--;
        }, delay, savedtimeout);
    }(delay, $element, timeouts[i]));
    ...
}

在循环中的索引内清除setTimeout

if(timeouts[i][0] != null) {
    //Removes the timeout from the queue
    clearTimeout(timeouts[i][0]);
}