Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptでのデバウンスとは何ですか？

デバウンス

デバウンス ブラウザのパフォーマンスを向上させるために、不必要な時間のかかる計算を減らすことに他なりません。一部の機能が特定の操作を実行するのにより多くの時間がかかるシナリオがいくつかあります。たとえば、検索バーの例を見てみましょう。 eコマースのウェブサイトで。

デブリーフィング

ユーザーが「Tutorixスタディキット」を入手したいとします。 。彼は検索バーに製品のすべての文字を入力します。各文字を入力すると、 APIが表示されます。 必要な製品を入手するために、ブラウザからサーバーへの呼び出しが行われます。彼は「Tutorixスタディキット」が欲しいので、ユーザーはブラウザからサーバーに17回のApi呼び出しを行う必要があります。何百万人もの人々が何十億ものApiのに電話して同じ検索を行うシナリオを考えてみてください。 。したがって、一度に数十億のApiを呼び出すと、間違いなくブラウザのパフォーマンスが低下します。 。この欠点を減らすために、デバウンス 絵になります。

このシナリオでは、デバウンス 2つのキーストロークの間に2秒の時間間隔を設定します。 2つのキーストローク間の時間が2秒を超える場合、Api呼び出しのみが行われます。これらの2秒間に、ユーザーは少なくともいくつかの文字を入力して、Apiが呼び出す文字を減らすことができます。 Api呼び出しが減少したため、ブラウザーのパフォーマンスが向上します。 デバウンスに注意する必要があります キーストロークごとに機能が更新されます。

概要の例

次の例では、ボタンがイベントリスナーに接続されています デバウンスを呼び出します 関数。 デバウンス 関数には2つのパラメーターがあり、1つは関数で、もう1つは数値（時間）です。タイマーが宣言されます。これは、その名前が示すように、デバウンスを呼び出します。 特定の時間後に機能します。

デバウンス ボタンをクリックすると、アラートボックスが開き、メッセージが表示されます。機能は毎回更新されます。つまり、遅延時間（2秒）の前にボタンがクリックされた場合、初期タイマーがクリアされ、新しいタイマーが開始されます。このタスクを実行するにはclearTimeOut（） 関数が使用されます。

例

<html>
<body>
<input type = "button" id="debounce" value = "Debounce">
<script>
   var button = document.getElementById("debounce");
   var debounce = (func, delay) => {
      let Timer
      return function() {
         const context = this
         const args = arguments
         clearTimeout(Timer)Timer= setTimeout(() =>
            func.apply(context, args), delay)
      }
   }
   button.addEventListener('click', debounce(function() {
      alert("Hello\nNo matter how many times you" +
      "click the debounce button, I get " +"executed once every 2 seconds!!")}, 2000));
</script>
</body>
</html>

上記の機能を実行すると、次のボタンが表示されます

JavaScriptでのデバウンスとは何ですか？

ボタンをクリックして2秒間待つと、次のアラートボックスが出力として表示されます。

出力

JavaScriptでのデバウンスとは何ですか？


  1. JavaScriptの関数式とは何ですか？

    関数式を使用すると、後で変数名を使用して呼び出すことができる変数に関数を格納できます。また、通常の関数宣言のように吊り上げられていないため、定義する前に呼び出すことはできません。 以下は、JavaScriptで関数式を実装するためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wid

  2. JavaScriptのクロージャとは何ですか？

    JavaScriptのクロージャを使用すると、外部関数が実行されて返された後でも、内部関数から外部関数スコープにアクセスできます。これは、内部関数が常に外部関数変数にアクセスできることを意味します。 以下はJavaScriptのクロージャのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device