setTimeoutは期待通りに機能しますが、seIntervalはクリックイベントでは発生しません

Question

プレーヤのJavaScript（JQueryはありません）で同じ要素を1回クリックしてダブルクリックするという問題に取り組んでいたとき、私はthis解決策を見ました@Garland教皇によると、プレーン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; 
 
    } 
 
});

しかし、私はのsetIntervalとてclearIntervalにのsetTimeoutとてclearTimeoutを変更したときに、それぞれ私が期待される結果を取得できませんでした。 "setTimeout"を使用すると、"遅延"時間内に2回クリックすると、ダブルクリックが記録され、"遅延"時間以内にシングルクリックすると、 "シングルクリック"のみが記録されます。。

しかし、 "setInterval"では、同じ話がダブルクリックになります。しかし、その違いはワンクリックでもたらされます。 「遅延」時間内に1回クリックすると、「シングルクリック」が記録されますが、何度もとは決して停止しません。 これは私が望んでいないものです。

これはどうして起こったのですか？何も思いつきません。ありがとうございました。

Answer 1

ここでsetIntervalは必要ありません。すべてのロジックを破ります。
setTimeout - 関数を一度呼び出すタイマー。
setInterval - 秒ごとに関数を呼び出すタイマー。

クリックすると、アプリケーションがタイマーを開始して待機します。関数を呼び出してそのタイマー - これ以上のクリックが、それはたとえばここ

「をシングルクリック」を言わないだろう場合、あなたは」のsetTimeoutを説明していただけますことはworkmますが、それは

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; 
 
} 
 
});