改变 HTML 输入打乱了我的 JS setInterval() 计时

Question

我有一个带有 setInterval() 框和输入框的页面。要重现该问题，请尝试加载下面的代码，在框中手动键入 4.5 而不是 0，然后单击下面的文本。然后，将其更改为 9.5。文本应该每 1 秒计数一次，但出于某种原因，它对我来说要快得多。

想法？

<head>

<!-- CSS inclusion -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

</head>
<body>
Input Box: <input type="number" class="timeSelect workSelect" value=0 /> 
<div class="startButton">
    Change the input to 4.5, and click this text. Then change to 9.5, and click again.
</div>
<div class="secondCounter">
</div>
<!-- Javascript Inclusion -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript">

var  secondsPassed;
function startTime(){
  secondsPassed = 0 ;
  $(".secondCounter").html("secondsPassed is "+ secondsPassed);
}
function updateTime(){
  secondsPassed ++;
  $(".secondCounter").html("secondsPassed is "+ secondsPassed);
}

$(".startButton").click(function(){
  startTime();
  setInterval(updateTime, 1000);
})

</script>

</body>

Answer 1

$(".startButton").click(function(){
  startTime();
  setInterval(updateTime, 1000);
})

每次你点击 startButton 都会开始另一个间隔，这意味着 updateTime 然后是运行两次。

要么取消旧的间隔，要么更新您的代码，这样 setInterval 就不会启动两次。

Answer 2

每次都需要清空定时器

<script type="text/javascript">

var timer,
    secondsPassed;

function startTime(){
  secondsPassed = 0 ;
  $(".secondCounter").html("secondsPassed is "+ secondsPassed);
}

function updateTime(){
  secondsPassed ++;
  $(".secondCounter").html("secondsPassed is "+ secondsPassed);
}

$(".startButton").click(function(){
  startTime();
  if(timer) clearInterval(timer);
  timer = setInterval(updateTime, 1000);
})

</script>

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval

改变 HTML 输入打乱了我的 JS setInterval() 计时

Altering HTML input is messing up my JS setInterval() timing

javascript

jquery

input

setinterval