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

Question

我正在做一个原始的反击。在其值达到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>

Answer 1

您可以再次设置

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

Answer 2

只需重新启动它并将数字重置为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>