防振の簡単な説明
関数のdebounce：同じタスクが短期間に頻繁に実行されるのを防ぎます。短期間に頻繁に発生する必要がない場合は、リソースの浪費や悪いエクスペリエンスの発生を回避するために、ジッタ除去を検討できます。
debounceの原理は、主に1回限りのタイマーを使用してタスクの実行を遅延させることです。遅延中にタスクが再度トリガーされると、タイマーが破棄されるため、最後に生成されたタイマーはclearTimeoutによって破棄されます。 以前に遅延したタスクもキャンセルされます。このように、タスクは特定の期間内に1回だけ実行されます。タイマーが破壊されたために前のトリガーがキャンセルされたため、この実行は通常最後のトリガーです。
複数回トリガーして最後にのみ実行することは、「スロットリング」の概念との違いかもしれません。この2つは機能的には非常に似ていますが、特定の実装ではわずかに異なります。関数のデバウンスは、短時間に複数回トリガーされますが、最後の実行のみ、つまり、複数の実行が最後の実行のみに変換され、実行回数が削減されます。スロットル（スロットル）とは、短時間に複数回実行して、一定の間隔で実行することです。
debounceの事例
1.debounce前後のサンプル効果のスクリーンショット
ソースコード
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Debounce Demo</title>
</head>
<body>
<h1>Debounce Demo</h1>
<label>
<span>名前をご入力ください：</span>
<input oninput="validatePhone(event.data)"></input>
</label>
<script>
let timer = null
function inputChange (data) {
// Debounceがないと、検証が頻繁にトリガーされます。たとえば、2つの連続する単語が6〜7回トリガーされる場合があります。，
// この頻度は必要ないかもしれません。頻度が必要ないとき、それは資源の浪費です。
// validatePhone(data)
// Debounce処理。同じ2つの単語が継続的かつ正常に入力された場合、1つの検証タスクのみがトリガーされます。
clearTimeout(timer)
timer = setTimeout(() => {
validatePhone(data)
}, 1000)
}
function validatePhone (data) {
let flag = true
const regPhone = /^1\d{10}$/
if (!regPhone.test(data)) {
flag = false
console.log('検証内容：' + data + '。電話番号が間違っています。0から始まる11桁の電話番号を入力してください')
}
return flag
}
</script>
</body>
</html>