Question

我正在尝试制作一个jQuery倒计时类型的动画，一旦它命中0就会执行一个函数。但是我遇到了问题，因为我不确定如何去做。我以为我会做一个while循环，然后暂停一秒，直到它达到0.但是似乎暂停一个while循环似乎不可能。所以我想知道最好的方法是什么？谢谢。

Answer 1

countdown使用HTMLElement显示自身以及
它返回一个Promise，当计数器达到0
我们可以使用.then调用在倒计时完成后应用功能

＆＃13;

function countdown(elem, s) {
  return new Promise(function(resolve) {
    function loop(s) {
      elem.innerHTML = s
      if (s === 0)
        resolve(elem)
      else
        setTimeout(loop, 1000, s - 1)
    }
    loop(s)
  })
}
                     
countdown(document.querySelector('#a'), 3).then(
  function(elem) { console.log('done', elem) }
)

countdown(document.querySelector('#b'), 5).then(
  function(elem) { console.log('done', elem) }
)

countdown(document.querySelector('#c'), 10).then(
  function(elem) { console.log('done', elem) }
)

＆＃13;

<p id="a"></p>
<p id="b"></p>
<p id="c"></p>

＆＃13;

您还应该知道setTimeout和setInterval并不保证所使用的毫秒参数是100％准确的...

＆＃13;

var last = Date.now()
var interval = setInterval(function() {
  var now = Date.now()
  var delta = now - last
  console.log(delta)
  last = now
}, 1000)

setTimeout(clearInterval, 10000, interval)
// 1000
// 1003
// 998
// 1002
// 999
// 1007
// 1001
// ...

＆＃13;

如果您需要具有高精度的长时间运行计时器，我建议您调整解决方案以使用基于增量的时钟更新。如果您依靠setTimeout或setInterval来获得准确性，那么您会很难过。

＆＃13;

function countdown(elem, ms) {
  return new Promise(function(resolve) {
    function loop(ms, last) {
      let now = Date.now()
      let delta = now - last
      if (ms <= 0) {
        elem.innerHTML = 0
        resolve(elem)
      }
      else {
        elem.innerHTML = (ms/1000).toFixed(3)
        setTimeout(loop, 25, ms - delta, now)
      }
    }
    loop(ms, Date.now())
  })
}
                     
countdown(document.querySelector('#a'), 3000).then(
  function(elem) { console.log('done', elem) }
)

countdown(document.querySelector('#b'), 5000).then(
  function(elem) { console.log('done', elem) }
)

countdown(document.querySelector('#c'), 10000).then(
  function(elem) { console.log('done', elem) }
)

＆＃13;

<p id="a"></p>
<p id="b"></p>
<p id="c"></p>

＆＃13;

Answer 2

代码：

var counter = 10;
var yourFunc = function(){}
var interval = setInterval(function(){
    counter--;
    if(counter <=0){ yourFunc(); clearInterval(interval); }
}, 1000);

Answer 3

我会使用递归函数

var countDown = function(secondsRemaining){
    secondsRemaining -= 1;
    if(secondsRemaining <= 0){
        //execute
    } else {
        //wait 1 second and call again
        setTimeout(function(){
            countDown(secondsRemaining);
        }, 1000);
    }
}

然后开始倒计时（5秒）

countDown(5000);

Answer 4

我会使用以下内容：

 $(document).ready(function(){
  var counter=10;
  countDown();

  function countDown(){

    $('#showNumber').text(counter--);
    if(counter>=0) 
      window.setTimeout(countDown,1000)
    else
      otherFunction();
  }

  function otherFunction(){
     $('#showNumber').text('FINISHED!');
  }

});

Answer 5

试一试。它不需要jQuery。

var count = 5;  // Number of times to run 'counter_function'.

// Run 'counter_function' every second (1000ms = 1 second)
var counter = setInterval(function(){
    counter_function()
}, 1000);

// The function to run when 'count' hits 0.
var done_function = function() {
    console.log('done');
}

// The function to run at each interval.
var counter_function = function() {
    console.log('count');
    count--;

    if(count === 0){
        done_function();
        clearInterval(counter);
    }
}

它会打印“＆＃39; count＆＃39;每秒钟，持续5秒，在最后一秒，它也将打印完成＆＃39;。

Answer 6

你在寻找像这样的OP吗？

每秒执行一次。就像我在评论部分添加时一样，您可以使用clearInterval（）。

＆＃13;

var start = 10; // time to countdown from in seconds
var interval = setInterval(
  function(){ 
    if (start == 0) {
      complete();
      clearInterval(interval);
    }
    $(".update").html("<h4>Countdown "+start+"</h4>");
    start--;
  }, 1000);

function complete() {
  console.log("called the callback, value of start is: "+start);  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="update">
  
</div>

＆＃13;

每秒jQuery倒计时

6 个答案: