JavaScript デバウンス
debounce 関数ドライブは、セレクターでインスタンス化できる明示的なメソッドではありません。 その定義は、タイマー、返される関数、およびコンテキストで構成されます。
この明示的な debounce 以外に、jQuery debounce、lodash debounce、underscore.js debounce があります。 視覚化のために、次のセクションで例を設定します。
このユースケースは、おそらくjQuery debounceの場合に非推奨になっています。 オンラインではさまざまな議論やデモが公開されていますが、以前のバージョンと最新バージョンの jQuery では何も出力されません。 むしろ、実装は $.debounce 関数が存在しないと言います。
ただし、ここでは、debounce メカニズムの基本的な実装と lodash debounce メソッドの 2つの例を検討します。 lodash は underscore.js 規約より優先されます。
そこで、lodash デバウンスに焦点を当てます。 この関数の基本的なシステムにもかかわらず、いくつかの他のパラメーターを使用することもできます。
これは、パフォーマンスを向上させるためでもあります。 lodash debounce の理解を深めるために、この ポータル にリダイレクトできます。
JavaScript debounce 関数の仕組み
デバウンス関数を使用する基本的な必要性は、不要なアクションを減らして関数の遅延を制限することです。 ここで、これが遅延によってどのようにパフォーマンスを向上させているのかという疑問が生じるかもしれません。
さて、ウィンドウの alert メソッドを考えてみましょう。 何が起こるかというと、アラートに対応するトリガーされたボタンをクリックすると、トリガーされます。
しかし、ユーザーがすぐに次々とクリックを繰り返すと、警告メッセージが不均一なプレビューまたは 1つの呼び出しアクションしか表示しないことがわかります。 これは、優れたパフォーマンスの欠如によるものです。
すべてのクリックまたはトリガーの後に信号の受け入れ時間が続き、それに応じて残りのアクションが起動されます。 検索ボックスに入力しているときに、キーを押すたびに、フィルター処理された結果が更新されます。
これは、この debounce 機能の実装でもあります。これは、どれだけクリックしたり、トリガーしたりしても、遅延するように求められた時間の後にのみ動作しますというものです。 そのため、誰かがボタンを突然クリックすると、前述の遅延時間の後にその機能が表示されます。
ここで、インスタンスには、関数がトリガーされるたびにクリアされるタイマーがあります。 そして、別のクリックが指示されたとき、時間遅延がクリック間の差よりも大きい場合、関数は時間カウントを再度リセットします。
最後のクリックに続いて、時間のカウントを開始し、タスクをプレビューします。
コードスニペット：
<html>
<body>
<button id="db">Debounce</button>
<script>
var btn = document.getElementById("db");
const debounce = (func, delay) => {
let Timer
return function() {
clearTimeout(Timer)
Timer
= setTimeout(() => func.apply(this, arguments), delay)
}
}
btn.addEventListener('click', debounce(function() {
alert("Executing after a sec!!")
}, 1000));
</script>
</body>
</html>
出力：
したがって、debounce 関数は、時間遅延とコンテキストの 2つのパラメーターを取ります。 呼び出しごとに、遅延時間はクリアされ、新たに開始されます。
したがって、一定の時間遅延が保証され、トリガー関数に対するユーザーの動作にもかかわらず、内部デバウンスは、時間枠によって制限された、私たちが取り組んでいる関数に他ならないデバウンスされた関数を返します。
lodash debounce メソッドを使用してパフォーマンスを向上させる
この指定された lodash ライブラリには、関数、遅延、および別のオプションのパラメーターを取る定義済みの _.debounce メソッドがあります。 したがって、明確で時間設定された制限を明示的に定義する必要はありません。
むしろ抽象化されており、呼び出すだけでデバウンス機能を実行できます。
コードスニペット：
<html>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js" integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<button id="db">Debounce</button>
<script>
var db = document.getElementById("db");
var debounce = _.debounce(function(){
alert("Wait for a sec!")
}, 1000, {'leading':false})
db.addEventListener('click', debounce);
</script>
</body>
</html>
出力：
