防振の簡単な説明

関数の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>