使用 setInterval() 创建计时器的问题：更新太快答案

【问题标题】：Issue with creating a timer using setInterval(): updates way too quickly使用 setInterval() 创建计时器的问题：更新太快
【发布时间】：2019-07-23 15:39:48
【问题描述】：

（首先，让我说，我的 github repo 中的代码：Click Here）

repo 应该为您提供问题所在的所有必要线索，但是如果您打开 index.html 文件并单击，则应该在左上角开始一个计数器。它似乎可以完美运行一段时间，但是如果您单击很多并拖动鼠标并在页面上移动一段时间，计数器会突然变得疯狂并快速计数。

我找不到执行此操作的代码的问题所在；我给了setInterval() 一个特定的时间来更新timer，但是在移动鼠标、点击一堆、拖动鼠标等之后……计数器发疯了。通常它不会是一个太糟糕的问题，但是我正在实现它的网站需要大量的点击和鼠标移动。

我的下一个问题是我找不到停止依赖mouseup 的方法。目前，当鼠标向下或向上时，计数器计数。但是，我希望它在按住左键时开始计数，并在我的手指离开左键时停止。我已经尝试过像while (mouseDown === true) ... 这样的while 循环，但无法正确加载页面。

感谢任何帮助！

let mouseDown = false;
let delta;
let isDragging = false;
var mY = 0;
//var currSpeed = $(document).cursometer('getCurrentSpeed');
let hello;
let timer = 0;
let pastTime;
let speed;

function collTime() {
    timer += 1
    $("#class").text(timer)
    mouseDown = false;
    }


$( document )
    .mousedown(function() {
    isDragging = false;
    mouseDown = true;   
    var cancel = setInterval(collTime, 1000)
 
})
    
    .mouseup(function() {
    isDragging = false;
    mouseDown = false;
    timer = timer
})

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script></head>
<body>

<div id="class">

</div>
<script src="script.js"></script>

</body>

</html>

重现问题：左键单击，左键单击并拖动鼠标，然后在运行框中非常疯狂地执行随机鼠标事件。你会注意到这个问题。

【问题讨论】：

请重读How to Ask。代码应该在问题中，作为minimal reproducible example，而不是作为外部链接。
请提供一小段代码，并提供更具体的 repo 步骤来重现您的问题。这也有助于更广泛地概述您正在尝试做的事情。
好的，我很抱歉。我将编辑问题
@LGSon 我已经添加了代码 sn-p。这个问题应该仍然存在
@katamaster818 添加了重现问题的步骤

标签： javascript jquery performance

【解决方案1】：

您每次点击都会调用setInterval()，但您永远不会清除前一个。如果我点击 10 次，现在是 10 个并发间隔。

如果您 declare 在根目录下取消其余变量，则可以从点击事件中访问它。这允许您在重置之前将其清除。

let cancel;

clearInterval(cancel);
cancel = setInterval(collTime, 1000)

let cancel;                               //Cancel is now global
let mouseDown = false;
let delta;
let isDragging = false;
var mY = 0;
let hello;
let timer = 0;
let pastTime;
let speed;

function collTime() {
  timer += 1
  $("#class").text(timer)
  mouseDown = false;
}


$(document)
  .mousedown(function() {
    isDragging = false;
    mouseDown = true;
    clearInterval(cancel);                //Remove the previous timer
    cancel = setInterval(collTime, 1000)  //Create a new one
  })
  .mouseup(function() {
    isDragging = false;
    mouseDown = false;
    timer = timer
  });

<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>

<body>

  <div id="class">

  </div>
  <script src="script.js"></script>

</body>

</html>

【讨论】：

嗯。这似乎解决了我的两个问题。非常感谢，对于我的代码的措辞和包括在内，我深表歉意！
不用担心，包括代码在内，解决起来会容易得多。