これまでJavaScriptでの討論の聞いたことは何ですか?

6537 ワード
react webdev javascript テキストリンク
あなたがここにいる場合は、おそらく知っているかもしれませんか、またはWebアプリケーションのパフォーマンスを向上させるために使用されるデバネーションの練習を学びたい.

債務の目的


Debugingは、関数を実行できる回数を制限するためのテクニックです.

どうやって動くの？


債務関数は、関数が呼び出され、定義済みの時間の後に火災が発生するまで、またはイベント発火が不活発になるまで待ちます.
じゃないかタイトに座ってみましょう正確に上記のステートメントの意味を参照してください.

デブリ
電子商取引アプリケーションの検索バーの例を取る.
ユーザーは“学校バッグ”を検索したいと仮定すると、ユーザーは検索バーの文字で文字を入力を開始します.各文字を入力した後、ユーザーの検索テキストのための製品を取得しようとしているAPI呼び出しがあります.この例では10の呼び出しがブラウザからサーバーに行われます.何百万ものユーザーがAPI呼び出しの数十億を作ることによってそこで同じ検索をするとき、シナリオを考えてください.一度にAPIの膨大な数を作ることは確実に遅いパフォーマンスにつながるでしょう.

救助への挑戦
このシナリオをモックアップして、各キーストロークで検索ボックスを作成して、GetData APIを呼び出します.ここでは実際のAPIを呼び出しませんが、コンソールにテキストをログ出力できます.
HTMLファイル
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <script src="./src/index.js"></script>
  </head>

  <body>
    <div id="app">
      <input type="text" id="userInput" />
    </div>
  </body>
</html>
JavaScriptファイル.
const inputBox = document.querySelector("#userInput");

function getData() {
  console.log("get Data api called ");
}

inputBox.onkeyup = getData;
結果:

ここでは、通常の実行では、各キーアップイベントの関数呼び出しを行います.関数がAPIコールを作成するような重いタスクを実行している場合、これはサーバー上の負荷やWebアプリケーションのパフォーマンスに関して高価な操作になる可能性があります.これを改善する方法を見つけましょう.
JavaScriptコードの更新
const inputBox = document.querySelector("#userInput");

function getData() {
  console.log("get Data api called ");
}

const debounce = (fn, delay) => {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => fn(...args), delay)
  }
}
const debouncedFunction = debounce(getData, 300);

inputBox.addEventListener("keyup", () => {
  debouncedFunction();
});
ありがとう
コメントセクションで最新のJavaScriptを使用して簡単な実装を提案するために.
結果

結果はちょうどワウです!我々は、サーバーからの負荷の多くを減らすことができるとより良い実行webapp.
のは、コードを介して行く、債務関数は、通常、あなたとの別の機能を返すsetTimeout() , 上記のコードでは、なぜ我々はタイマーをクリアして疑問に思うかもしれないclearTimeout() 最初にして、再びタイマーを設定してsetTimeOut() 2つの関数呼び出しの間の違いが300ミリ秒であるようになるまで、2回の関数呼び出しの間の違いがこのような場合、ユーザが入力した最後の文字タイプと次の文字の違いが、関数が呼び出される遅延よりも大きい場合、入力を開始するときには、API呼び出しが最終的にタイマーをクリアします.
私たちがデバッギングで達成したことは、それが間違っていないかもしれませんが、これらの2つの微妙な違いと異なるユースケースを持っています.
あなたが何のthrottlingであるかについて疑問に思っているならば、それは機能が呼ばれる回数を減らしたが、異なるブログ記事のために違いと使用ケースを保ってみましょう.
閉じるこの動画はお気に入りから削除されています.どんな修正または提案のためにでもコメントしてください.
それまで幸せなJavaScript❤
ピースアウト✌️
剣指Offer 61.トランプの順子
[解析アルゴリズム解答]BOJ 21610法師サメとヒマワリ