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

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);

Caution in using setInterval, may not work as you expect http://bonsaiden.github.io/JavaScript-Garden/#other.timeouts

Answer 3

setInterval keeps calling your function at each second (since you use 1000).

So setInterval expects a function as its first argument, which is the function which will be called periodically. But instead of passing settime, you pass its returned value. That won't work, unless settime returns a function.

Instead, try

setInterval(settime, 1e3);

Answer 4

尝试使用.data()，.queue()，animate()，.promise();停止“倒计时”可以拨打$(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（）创建计时器

4 个答案: