javascript - 改变 HTML 输入扰乱了我的 JS setInterval() 计时

标签 javascript jquery input setinterval

工作 JSBin:https://jsbin.com/nijozefoma/

我有一个带有 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> 

最佳答案

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

每次点击 startButton 时,您都会开始另一个间隔,这意味着 updateTime 会运行两次。

取消旧的间隔或更新代码,以便 setInterval 不会启动两次。

关于javascript - 改变 HTML 输入扰乱了我的 JS setInterval() 计时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38131365/

相关文章:

javascript - 为什么 instanceof 在 Chrome、Safari 和 Edge 上返回 false,而在 FireFox 上返回 true?

javascript - 用户在输入字段中输入前 4 位数字后运行函数

javascript - 如何使用 UIWebView 让 html5 播放器在 Ipad 全屏上播放

jquery - 克隆对象中的清除文本字段值

javascript - postMessage JSON 在 Google Chrome 中的编码/解码是否与在 Firefox 中一样?

javascript - 如何在我的客户端代码中设置环境变量?

javascript - 单击按钮播放/暂停音频没有延迟

javascript - 文本框字符验证

c++ - 如何从整个代码的函数中打开文件?

arrays - 如何从 C 语言的输入中读取字符数?