カスタム関数または Lodash ライブラリを使用した Javascript でのデバウンス.


デバウンス機能とは

待ってください.あなたは Javascript 開発者で、特定のアクションまたはイベントがトリガーされてから一定時間後にのみ起動する関数を実装しようとしていて、試してみましたが、まだ正しい方法で取得できていません.

これ以上心配する必要はありません.これを正しい方法で行うための 2 つの方法をまとめます.これは、デバウンス機能によって解決されます.

1.) カスタム JS 関数を使用したデバウンス

const debounceTime = (fn, T)=>
{
let timer;
  return function() {
    if(timer) clearTimeout(timer)
    timer=setTimeout(fn, T)
  }
}


この関数は、デバウンスされる関数 fn() と、アクションの実行を待機する時間間隔 T の 2 つのパラメーターを受け取ります.

たとえば、1000 ミリ秒または 1 秒後に呼び出されるコールバック関数が必要な場合は、コールバック関数のパラメーターと 1000 ミリ秒を指定して debounceTime 関数を呼び出すだけです.
この関数は、コンソールで 1 秒後に「I debounced after 1 seconds」を記録します.

debounceTime(()=>{
console.log("I debounced after 1 seconds")
}, 1000)


2.) Lodash を使用したデバウンス
Node.js 環境で lodash パッケージを使用できるようにするには、
最初に、コマンド ライン インターフェイスから npm の場合は $ npm i --save lodash を、yarn の場合は $ yarn add lodash を使用して lodash パッケージをインストールする必要があります.
その後、適用するファイルにインポートします.
「lodash」から {debounce} をインポートする

debounce(()=>{
console.log("I debounced after 1 seconds")
}, 1000)


上記の使用例は、カスタム JS 関数を使用した例とまったく同じように機能します.

お役に立てば幸いです😀😀😀
読んでくれてありがとう、ハッピーコーディング!!!