具有延迟、重置和重新启动的计时器?jQuery

timer with delay, reset and restart? jQuery

本文关键字：重新启动 计时器 jQuery 延迟      更新时间：2023-09-26

所以我基本上有一个计时器，每4秒计数一个数字。当它达到10时停止。

Q： 如何使计时器在10停止几秒钟，然后在1再次开始计数？

    var i = 8;
setInterval( increment, 4000);
function increment(){
if(i<=10)
{
console.log(i);
 $('.increase').html('').append(i);
i++;
}
}

JSfiddle：http://jsfiddle.net/0t3s8erj/

使用else！

var counter = 0
function increment () {
  counter++
  if (counter <= 10) {
    console.log(counter)
  } else {
    clearInterval(incrementInterval)
    setTimeout(function () {
      incrementInterval = setInterval(increment, 4000)
    }, 10000)
  }
}
incrementInterval = setInterval(increment, 4000)

您可以这样做，运行一个间隔计时器，直到达到最大计数，然后清除该计时器并启动一个新的计时器，直到您想要暂停的时间，然后当延迟计时器启动时，您再次调用函数以重新启动它。

这是一个工作代码片段（我在这里设置的时间很短，用于演示目的，但您可以将它们设置为任何您想要的）：

function runTimer(selector, start, end, interval, delay) {
    var cntr = start;
    $(selector).html(cntr);
    var timer = setInterval(function() {
        ++cntr;
        $(selector).html(cntr);
        if (cntr >= end) {
            clearInterval(timer);
            setTimeout(function() {
                runTimer(selector, 1, end, interval, delay);
            }, delay);
        }
    }, interval);
}
runTimer('.increase', 8, 10, 300, 2000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="increase">8</span>/10

相关文章：