如何在clearInterval之后重新启动相同的功能

How to restart the same function after clearInterval?

本文关键字：功能 重新启动 之后 clearInterval      更新时间：2023-09-26

我正在创建一个原始计数器。当它的值达到0时，添加一些动画，之后计时器再次重启。我使用clearinterval来停止函数，或者我错了?有什么办法吗?下面是我开始的代码:

var number = 5;
var timer = setInterval(counterdown, 1000);
var $counter = $('.counter')
function counterdown() {
	number = number - 1;
	$counter.text(number)
	if(number <= 0) {
		clearInterval(timer);		
	}
}
* {
  box-sizing: border-box;
}
body, html {
  min-height: 100vh;
}
.flex-box, body, body .counter {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
body {
  font-family: 'Maitree', serif;
  background: #2A2D34;
}
body .counter {
  background: #fff;
  color: #333;
  width: 200px;
  height: 200px;
  font-size: 100px;
  padding: 30px;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3), 4px 4px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.75);
  border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="counter"> 
	
</div>

可以重新设置

function restart(){ timer=window.setInterval(counterdown(),1000);number=5;}

只需重新启动它并将数字重置为5。

var number = 5;
var timer = setInterval(counterdown, 1000);
var $counter = $('.counter')
function counterdown() {
	number = number - 1;
	$counter.text(number)
	if(number <= 0) {
		number = 5;
        }
  
}
* {
  box-sizing: border-box;
}
body, html {
  min-height: 100vh;
}
.flex-box, body, body .counter {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
}
body {
  font-family: 'Maitree', serif;
  background: #2A2D34;
}
body .counter {
  background: #fff;
  color: #333;
  width: 200px;
  height: 200px;
  font-size: 100px;
  padding: 30px;
  text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.3), 4px 4px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.75);
  border-radius: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="counter"> 
	
</div>

相关文章：