使用 setInterval() 创建一个计时器

Question

我正在尝试使用 setInterval 函数在 javascirpt 和 jQuery 中制作一个计时器。计时器应从 90 倒数到零（秒）。

我为此使用的代码：

setInterval(settime(), 1000);

在这个 settime() 中设置 var time（从 90 开始）-1，这个动作必须每秒发生一次。我的问题是我不知道如何让这个动作发生 90 次；我尝试使用 for 循环，但随后计数器在 1 秒内从 90 计数到 0。

有谁知道更好的选择吗？

Answer 1

像这样应该可以解决问题：

var count = 90;
var interval = setInterval(function(){
  setTime();
  if (count === 0){
    clearInterval(interval); // Stopping the counter when reaching 0.
  }
}, 1000);

我没有您需要的代码，但我相信您需要在页面上的某个时候更新计数。

您可以使用 clearInterval 取消间隔，这需要您调用 setInterval

时创建的间隔的 ID

Answer 2

setInterval 每秒都在调用你的函数（因为你使用了 1000）。

所以setInterval需要一个函数作为它的第一个参数，这个函数将被定期调用。但是您没有传递 settime，而是传递了它的返回值。那是行不通的，除非 settime returns 一个函数。

相反，尝试

setInterval(settime, 1e3);

Answer 3

function timer(seconds, cb) {
  var remaningTime = seconds;
  window.setTimeout(function() {
    cb();
    console.log(remaningTime);
    if (remaningTime > 0) {
      timer(remaningTime - 1, cb); 
    }
  }, 1000);
}

var callback = function() {
  console.log('callback');
};

timer(90, callback);

使用 setInterval 的注意事项，可能不会像您预期的那样工作http://bonsaiden.github.io/JavaScript-Garden/#other.timeouts

Answer 4

尝试利用.data()、.queue()、animate()、.promise()；停止 "countdown" 可以调用 $(element).clearQueue("countdown")

var counter = function counter(el) {
   return $(el || window).data({
    "start": {
      "count": 0
    },
    "stop": {
      "count": 1
    },
    "countdown": $.map(Array(90), function(val, key) {
                   return key
                 }).reverse(),
    "res": null
  })
  .queue("countdown", $.map($(this).data("countdown")
    , function(now, index) {
      return function(next) {
        var el = $(this);
        $($(this).data("start"))
        .animate($(this).data("stop"), 1000, function() {
          el.data("res", now)
          $("pre").text(el.data("res"));
          next()
        });
      }
    })
  )
  .promise("countdown")
  .then(function() {
    $("pre").text($(this).data("res"))
    .prevAll("span").text("countdown complete, count:");
  });
  };
  $("button").on("click", function() {
    if ($(this).is("#start")) {  
       counter();
       $("pre").text(90).prev("span").html("");
       $(window).dequeue("countdown");
    }
    else {
       $(window).clearQueue("countdown").promise("countdown")       
      .then(function() {
         $("pre").prevAll("span").html(function(_, html) {
         return html.replace("complete", "stopped")
       });
       })       
    }
  });

pre {
  font-size:36px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button id="start">start</button><button id="stop">stop</button>
<br />
<span></span>
<br />
<pre>90</pre>

使用 setInterval() 创建一个计时器

Make a timer using setInterval()

javascript

jquery

setinterval