javascript - setTimeout 按预期工作，但 seInterval 不在点击事件中

Question

当我正在研究区分普通 JavaScript(无 JQuery)中同一元素的单击和双击问题时，我看到 this @Garland Pope 给出的解决方案并将其转换为纯 JavaScript:

var numClicks = 0,
  interval = null,
  delay = 250;
document.addEventListener("click", function(event) {
  numClicks++;
  if (numClicks === 1) {
    interval = setTimeout(function() {
      // Things to do on one click.
      console.log("Single Click");
      numClicks = 0;
    }, delay);
  } else {
    clearTimeout(interval);
    // Things to do on double click.
    console.log("Double Click");
    numClicks = 0;
  }
});

但是当我将 setTimeout 和 clearTimeout 分别更改为 setInterval 和 clearInterval 时，我没有得到预期的结果结果。使用setTimeout，对于“延迟”时间内的两次点击，它记录“双击”，对于“延迟”时间内的单击，它仅记录“单击”一次。

但是对于setInterval，双击也会发生同样的情况。但是，区别在于单击一下。当我在“延迟”时间内单击一次时，它会记录“单击”，但多次并且永远不会停止。这不是我想要的。

谁能解释一下为什么会发生这种情况？我不知道。

Answer 1

这里不需要 setInterval，它会破坏所有逻辑。
setTimeout - 调用函数一次的计时器。
setInterval - 每秒调用函数的计时器。

您单击，然后应用程序启动计时器并等待。如果不再点击，则会显示“单击”

这里的例子，它可以工作，但它模拟 setTimeout 函数

var numClicks = 0;
var interval = null;
var delay = 250;

document.addEventListener('click', function () {
++numClicks;

if (numClicks === 1) {
    interval = setInterval(function () {
        clearInterval(interval);

        // Things to do on one click.
        console.log('Single Click');
        numClicks = 0;
        
    }, delay);
} else {
    clearInterval(interval);

    // Things to do on double click.
    console.log('Double Click');
    numClicks = 0;
}
});