序文: フロントエンド開発者には、次の 2 つの要件があります。 (1)検索要件
(2)ページがデータを無限に読み込む
上記 2 つはリクエスト頻度の制御の問題のように見えますが、要件が少し異なります。検索は、ユーザーが入力で複数回入力する場合であり、ユーザーが短時間入力を停止した後にのみリクエストが送信されます。このとき、それを実現するには手ぶれ補正が必要です。スクロールデータの読み込みとは、ユーザーがページをスクロールしている間、一定の間隔でデータを要求することを意味します。ユーザーがスクロールを続けている場合でも、ユーザーがスクロールを停止するのを待つのではなく、要求が行われます。この場合、これを実現するにはスロットリングが必要です。 1. 手ぶれ補正意味: 簡単に理解すると、ユーザーがイベントを複数回トリガーした場合、ユーザーがイベントをトリガーし続けている間はイベントは実行されません。ユーザーが一定期間イベントのトリガーを停止すると、イベントは 1 回だけ実行されます。 成し遂げる: // @fn は対応するリクエストデータです // @ms はユーザーによるイベントの複数のトリガー間の時間間隔(ミリ秒単位) function debounce(fn, ms) { タイムアウト = null にする 関数()を返す{ clearTimeout(タイムアウト) タイムアウト = setTimeout(() => { fn.apply(これ、引数) }、 MS) } } 原理: ユーザーがイベントをトリガーするたびに、実行が遅延されます。遅延タイマーを設定する前に、以前の遅延タイマーがクリアされます。最後に、連続したユーザートリガー間の間隔が、設定したパラメータ テスト: <input id="検索入力"/> 関数 getData(){ console.log('リクエストを送信しています...') } document.getElementById('searchInput').oninput = debounce(getData, 800) // ユーザーが入力を続けると、リクエストは送信されません // ユーザーの連続入力間隔が 800 ミリ秒を超えた場合にのみデータが要求されます。つまり、ユーザーが 800 ミリ秒以内に入力しない場合にのみデータが要求されます 2. スロットリング意味: 簡単に理解する方法は、ユーザーがイベントを複数回トリガーし、ユーザーがイベントをトリガーし続けると、イベントが一定の間隔で 1 回実行され、複数回実行されるというものです。 成し遂げる: // @fn は対応するリクエストデータです // @ms はユーザーによってトリガーされた複数のイベント間の時間間隔(ミリ秒単位)です function throttle(fn, ms){ フラグを true にする 関数()を返す{ if(!フラグ) 戻り値 フラグ = 偽 タイムアウトを設定します(()=>{ fn.apply(これ、引数) フラグ = true }、 MS) } } 原理: ユーザーがイベントをトリガーするたびに、遅延タイマーが設定されます。ただし、遅延タイマーが設定されている場合は、前の遅延タイマーが実行されるまで次のタイマーは開始されません。このように、ユーザーはイベントをトリガーし続け、イベントは一定期間ごとに 1 回実行されます。 テスト: 関数 getData(){ console.log('リクエストを送信しています...') } window.onscroll = スロットル(getData, 800) // ユーザーがスクロールしている間、一定間隔でデータを要求します 3. まとめスロットリングとアンチシェイクは、基本的にイベント実行の頻度を制御することですが、イベントをトリガーするタイミングは本質的に異なります。アンチシェイクは、ユーザーがイベントを複数回トリガーし、ユーザーがイベントのトリガーを停止すると、イベントが 1 回実行されます。一方、スロットリングは、ユーザーがイベントを複数回トリガーし、複数のトリガー プロセス中に間隔を置いてイベントが実行される場合です。 以下もご興味があるかもしれません:
|
<<: JDカルーセル効果を実現するための純粋なHTMLとCSS
>>: Docker がデータベースのデプロイに適さない 7 つの理由のまとめ
背景記事を始める前に、賽博朋克とは何か、賽博朋克2077とは何かを簡単に理解しましょう。サイバーパン...
Dockerインストール後のネットワークタイプ [root@insure updev]# docke...
序文js を使用して、年の回転選択効果を実現します。では早速、写真を見てみましょう。 1. アイデア...
ステップ 1: メモ帳を使用して、MySQL インストール ディレクトリの「my.ini」ファイルを...
1.0 Redis の永続性Redis はメモリ内データベースです。サーバー プロセスが終了すると、...
この記事の例では、複数のカウントダウンを同時に設定するためのVueの具体的なコードを参考までに共有し...
序文一般的に、Linux システムについて話すときは、Linux カーネルと GNU プロジェクトに...
目次1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、デ...
MySQLデータベースをインストールするa) MySQL ソースインストールパッケージをダウンロード...
序文Tomcat は、無数のチューニング オプションを備えた、広く使用されている Java Web ...
序文ゲートウェイプロジェクトを開発する場合、署名 sign_key 情報はリクエスト時にリクエスト ...
写真を背景にしてリンクを記載します。たとえば、ウェブサイトのロゴ画像などです。例: ポテトのロゴ画像...
今回はReact-Flaskフレームワーク上でアップロードコンポーネントを開発するスキルについてお話...
フォームが送信されると、返された HTML ページが再レンダリングされ、SELECT コントロールの...
最近、同社はitpubを皮切りに、コーポレートウェブサイト傘下の全サイトの評価を開始した。そのために...