javascript - JavaScript：在循环中动态添加 setInterval()，并分别清除每个实例

Question

我想循环使用特定类的每个元素，然后为每个元素添加间隔和超时。超时将在 n 秒内更改其类，并且间隔将重复 x 秒。

但是，我还希望用户通过单击他们选择的元素来单独停止间隔，而不是一次清除所有间隔（或最后一次超时）。有没有办法在循环中为每次迭代设置单独的 Interval 实例？如果是这样，您以后如何单独引用这些实例？

注意我陷入逻辑的地方：

 var myInterval;
 $('.my-elements').each(function(i){
    var thisElement = $(this)

    //add class every 2000 milliseconds
    //At a loss on how to make dynamic/relative to interation
    setInterval(function(){

      $(thisElement).addClass("active");
      //remove class after 200 milliseconds 
      var myInterval = setTimeout(function(){ $(thisElement).removeClass("active") },200)


    }, 2000)

    $(thisElement).click(function(){
      //AT A LOSS
      //stop interval for this element;
    })

})

标签： javascriptloopssettimeout

Answer 1

您可以使用 .为每个动态元素单独运行计时器setInterval。setInterval不是 jQuery 函数。它是一个内置的 JavaScript 函数。

单击此处查看完美示例，

var elementArray = [];
function timer(selector, element) {
    var self = $(selector);
    var sec = 0;
    var text = self.find('span.timeout').text();
    
    elementArray.forEach(function(item) {
        		//console.log(item);
            if(item.element != element){
              $("#"+item.element).removeClass("timerOn");
              $("#"+item.element).addClass("timerPause");
            }
            
    });
    
    elementArray = [];
    
	
    var interval = setInterval(function() {
        sec++;
        
        var elementID = element;
        
        
        if($("#"+elementID).hasClass("timerOn")){
        	//console.log(sec);
          //console.log(elementID);
        	$("#"+elementID).find('span.timeout').text(text+ '(' + sec + ')');
        }else{
        	window.clearInterval(interval);
        }
        
    }, 1000);
    
    var obj = {
    	controller : interval,
      element : element
    };
    
    elementArray.push(obj);
}


$("body").on('click', '.element', function() {

		if($(this).hasClass("timerOn")){
    	$(this).removeClass("timerOn");
      $(this).addClass("timerPause");
    }else if($(this).hasClass("timerPause")){
    	$(this).removeClass("timerPause");
      $(this).find('span.timeout').text($(this).find('span.timeout').text().replace(/ *\([^)]*\) */g, ""));
    }
    else{
    	$(this).addClass("timerOn");
      timer(this, $(this).attr('id'));
    }

    
});

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <button class="element" id="el1">
    <span class="timeout">time</span>
 </button>
  <button class="element" id="el2">
    <span class="timeout">time</span>
  </button>
   <button class="element" id="el3">
    <span class="timeout">time</span>
  </button>
   <button class="element" id="el4">
    <span class="timeout">time</span>
  </button>
</div>