如何调用setInterval函数

Question

代替setInterval在刷新时运行，我希望它在点击开始按钮时运行&到时间上去。在过去的几个小时里，我几乎尝试了所有的变体。没有任何错误。

相反，定时器停止，这是有意义的，如果时间>2. 因此，我不确定如何使定时器重新启动一旦start被点击，计时器停止一旦时间达到(即2秒)

HTML

<script src='https://api.chipware.co.za/js/flipclock-min.js'></script><script  src="./script.js"></script>
<button style="width:200px; height: 50px;" id="start">Start</button>
<button style="width:200px; height: 50px;"onclick="submit()" id="stop">Submit</button>

JS

let time = 2;
var clock = $('.clock').FlipClock(0, {
clockFace: 'HourlyCounter',
countdown: false });
function submit(){
clock.stop();
}
var element_ = document.getElementById("start");
element_.addEventListener('click', function(){
start(time);
});
function start(time){
countup = setInterval(function () { 
if(clock.getTime().time > time) { 
clock.stop();
clearInterval(countup);
}
else{
var element = document.getElementById("stop");
element.addEventListener('click', function(){
submit();
});
}
})}; 

也不确定为什么这个代码运行w/o错误本身，但在chrome扩展，它给出:

Uncaught TypeError: $(...).FlipClock is not a function

Answer 1

你缺失的flipclock库，我刚刚添加和更新的代码，现在它的工作。

let time = 2;
var clock = $('.clock').FlipClock(0, {
clockFace: 'HourlyCounter',
countdown: false });
function submit(){
clock.stop();
}
var element_ = document.getElementById("start");
element_.addEventListener('click', function(){
start(time);
});
function start(time){
countup = setInterval(function () { 
console.log(clock.getTime().time ,time)
if(clock.getTime().time > time) { 
clock.stop();
clearInterval(countup);
}
else{
var element = document.getElementById("stop");
element.addEventListener('click', function(){
submit();
});
}
})};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.7/flipclock.min.js" integrity="sha512-Vy4ftjkcjamOFPNSK7Osn8kYhF7XDcLWPiRvSmdimNscisyC8MkhDlAHSt+psegxRzd/q6wUC/VFhQZ6P2hBOw==" crossorigin="anonymous"></script>
<button style="width:200px; height: 50px;" id="start">Start</button>
<button style="width:200px; height: 50px;"onclick="submit()" id="stop">Submit</button>