Блог

Я хочу реализовать интервал, в котором число увеличивается при нажатии кнопки.

Есть несколько кнопок и один элемент с увеличивающимся числом.

Проблема в том, что если я нажму другую кнопку во время интервала, я не смогу остановить интервал, который уже выполнялся.

Пожалуйста, помогите мне.

HTML

 <ul> 
  <li><a href="javascript:;" class="btn" data-length="3">1</a></li>
  <li><a href="javascript:;" class="btn" data-length="8">2</a></li>
  <li><a href="javascript:;" class="btn" data-length="5">3</a></li>
</ul>
<div class="counter">0</div>
 

JS

 const interval = (e) => {
  setTimeout(() => { 
    $('.counter').html(e)
  }, 500 * e);
}

$('.btn').on('click', function(){
  var $this = $(this),
      length = $this.data('length');

  for (let i = 1; i <= length; i  ) {
    (function(e){
        interval(e)
    })(i)
  }
})
 

ДЕМОНСТРАЦИЯ: https://jsfiddle.net/bnzLrg03/7 /

Вам нужно setTimeout указать переменную, а затем использовать clearTimeout для удаления из нее таймера.

 const interval = (e) => {
  window.sT = setTimeout(() => { 
    $('.counter').html(e)
  }, 500 * e);
}
 

.. и таким образом вы можете очистить таймер, используя clearTimeout(sT)

Объединение всего вместе

 const interval = (e) => {
  window.sT = setTimeout(() => { 
    $('.counter').html(e)
  }, 500 * e);
}

$('.btn').on('click', function(){
  if(window.sT) clearTimeout(window.sT);
  var $this = $(this),
      length = $this.data('length');

  for (let i = 1; i <= length; i  ) {
    (function(e){
        interval(e)
    })(i)
  }
})
 

Однако я действительно не уверен, почему вы перебираете length значение здесь. Я бы предложил использовать setInterval вместо setTimeout

Обновление решения с setInterval использованием и удаление ненужных переменных

 const interval = (e) => {
  let i = 1;
  window.sT = setInterval(() => { 
    $('.counter').html(i  )
    if(i > e) clearInterval(sT);
  }, 1000);
}

$('.btn').on('click', function(){
  if(window.sT) clearTimeout(window.sT);
  interval($(this).data('length'))
})
 

 const interval = (e) => {
  let i = 1;
  window.sT = setInterval(() => { 
    $('.counter').html(i  )
    if(i > e) clearInterval(sT);
  }, 1000);
}

$('.btn').on('click', function(){
  if(window.sT) clearTimeout(window.sT);
  interval($(this).data('length'))
}) 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="javascript:;" class="btn" data-length="3">1</a></li>
  <li><a href="javascript:;" class="btn" data-length="8">2</a></li>
  <li><a href="javascript:;" class="btn" data-length="5">3</a></li>
</ul>

<div class="counter">0</div>