JavaScript: динамическое добавление setInterval () в цикле и очистка каждого экземпляра отдельно - PullRequest
Новая
       8

JavaScript: динамическое добавление setInterval () в цикле и очистка каждого экземпляра отдельно

0 голосов
/ 15 ноября 2018

Я хочу перебрать каждый элемент с определенным классом, затем добавить интервал и время ожидания для каждого элемента. Время ожидания изменит свой класс через 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;
    })

})

Ответы [ 2 ]

0 голосов
/ 15 ноября 2018

Поскольку установка времени ожидания фактически возвращает числовой идентификатор таймера, вы можете просто сохранить / кэшировать таймер, связанный с каждым элементом в пользовательском объекте jQuery .data().

Обратите внимание, что в приведенном ниже примере я установил таймер с 200ms на 1000ms, чтобы вы могли лучше видеть изменения. 

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

  //add class every 2000 milliseconds
  setInterval(function() {

    $thisElement.addClass("active");
    var classRemovalTimer = setTimeout(function() {
      $thisElement.removeClass("active")
    }, 1000);

    // Store this class removal timer in jQuery data object
    $thisElement.data('class-removal-timer-id', classRemovalTimer);

  }, 2000);

  $thisElement.click(function() {
    // Check if timer exists for the element.
    // If it does, clear it
    var classRemovalTimer = $thisElement.data('class-removal-timer-id')
    if (classRemovalTimer) {
       window.clearTimeout(classRemovalTimer);
    }
  })

})
.active {
  background-color: red;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my-elements">1</div>
<div class="my-elements">2</div>
<div class="my-elements">3</div>
<div class="my-elements">4</div>
<div class="my-elements">5</div>

Некоторые дополнительные советы:

  • Вы дважды оборачиваете свой элемент $(this), сначала присваивая ему значение thisElement, а затем оборачивая $(thisElement) позже. Вам нужно сделать это только один раз
  • Узнайте, как вы можете воспользоваться jQuery's .data() объект / магазин
0 голосов
/ 15 ноября 2018

Назначьте вызов setInterval для myInterval и удалите глобальную переменную myInterval вместо setTimeout, также нет необходимости заключать ваш элемент в другой вызов jquery 

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

    //add class every 2000 milliseconds
    var myInterval = setInterval(function(){
        thisElement.addClass("active");
        //remove class after 200 milliseconds -- At a loss on how to make dynamic/relative to interation
        setTimeout(function(){ $(thisElement).removeClass("active") },200);
    }, 2000)

    thisElement.click(function(){
        clearTimeout(myInterval);
    });
})
...