通过在间隔期间单击另一个按钮来停止和重置间隔

Question

我想实现点击按钮时数字增加的间隔。

有多个按钮和一个元素，数量越来越多。

问题是，如果我在间隔期间单击另一个按钮，我无法停止已经在进行的间隔。

请帮帮我。

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/

Answer 1

您需要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>