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

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>

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

Interval stop and reset by clicking another button during an interval

html

javascript

jquery

settimeout