jsで関数アンチシェイクとスロットルを実装する方法

概念的な理解

アンチシェイク: イベントがトリガーされてから n 秒後にコールバックを実行します。この n 秒以内に再度トリガーされた場合は、時間を再開します。

スロットリング: この機能は単位時間内に 1 回だけトリガーできると規定されています。この単位時間内に関数が複数回トリガーされた場合、有効になるのは 1 つだけです。

関連する推奨事項: 「javascript 上級チュートリアル 」

JS 関数の手ぶれ補正とスロットリングの違い:

関数手ぶれ補正は一定時間内に 1 回のみ実行されますが、機能スロットリングは一定間隔で実行されます。

個人的な落とし穴

1. 関数のアンチシェイクと関数のスロットリングの概念を理解した後、クロージャーを使用して関数のアンチシェイクとスロットリングを実装する場合、考慮されていませんでした。スロットルの場合、ユーザーが次のリクエストの前に入力を完了したが、この時点で別のリクエストを行わない場合、最後に入力したテキストがリクエストを送信せずに他のイベントによって変更されます。つまり、リクエストが失われます。そのため、setTimeout 関数を追加する必要があります。また、リクエストを準備するたびに、リクエストが送信されたかどうかを示すフラグを設定します。リクエストが通常のサイクルで送信された場合は、それを true に変更します。それ以外の場合は、フラグを設定します。 false. setTimeout を使用します. setTimeout を残りのイベントより少し長くして優先させます. スロットル タイマー リクエスト;

2. アロー関数を使用する場合、これを保存する必要はありません。

コード実装

うわー

以上がjsで関数アンチシェイクとスロットルを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。