序文: フロントエンド開発者には、次の 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 つの理由のまとめ
モバイル ブラウザは、Web ページを仮想の「ウィンドウ」(ビューポート) に配置します。このウィン...
最近、同社は CCFA 関連のいくつかの作業を行う予定で、その 1 つはカメラのリアルタイム監視を再...
nginx の設定は次のとおりです。 http://172.17.188.27/wgcloud など...
今日から、定期的にちょっとした豆知識を整理していきます。簡単なものもあるかもしれませんが、どれも役に...
このセクションでは、テキストの変更の詳細から始めます。これにより、読者はさまざまな HTML フォン...
この記事では、圧縮パッケージから MySQL をインストールする方法について説明します。 1. My...
1: タグセレクタータグセレクターはすべてのタグに使用されます。ここでは p を例に挙げます。つまり...
1. Vueルーティングの権限制御には一般的に2つの方法がありますa. ルーティングメタ情報(メタ)...
今日は春節の金貨の赤い封筒のアクティビティを作りました。なかなか良い出来だと思います。皆さんと共有し...
目次フィルター01.とは02. やり方(1)フィルターを定義する(2)使用方法(3)フィルタパラメー...
序文開発プロセスでは、10 進データ型がよく使用されます。 MySQL では、小数点は正確なデータ型...
「ページのスクリーンショット」は、ページポスターの生成、ポップアップ画像の共有など、フロントエンドで...
いくつかの Qt インターフェース プログラムを作成しましたが、Qt 環境がインストールされていない...
1. まず、VS2019とMySQLデータベースを準備します。どちらも公式サイトからダウンロードで...
この記事では、ドラッグアンドドロップやクリックによる画像のアップロードを実現するためのVueの具体的...