2023年1月31日火曜日

動的アクションのデバウンスとスロットル

 Oracle APEX 22.2にて追加された新機能に動的アクションのデバウンスとスロットルがあります。JavaScriptを書いてユーザー・インターフェースをカスタマイズする方には評価の高い新機能です。

動的アクションを実行するタイミングの調整に使用します。

動作について紹介するため、実装のサンプルを作成してみました。

表EMPを表示する対話モード・レポートを作成します。


ソースのWHERE句に以下を記述しています。

ENAME like '%' || coalesce(:P1_ENAME_I, :P1_ENAME_D, :P1_ENAME_S) || '%'

送信するページ・アイテムとして、以下の3つのページ・アイテムを設定します。

P1_ENAME_I,P1_ENAME_D,P1_ENAME_S

ページ・アイテムP1_ENAME_I、P1_ENAME_D、P1_ENAME_Sのどれも、キー・プレスのイベントが発生したときに対話モード・レポートをリフレッシュします。

ページ・アイテムP1_ENAME_Iの動的アクションは、実行のタイプを即時にします。


ページ・アイテムP1_ENAME_Dの動的アクションは、実行のタイプをデバウンス、時間を1000(つまり1秒)、即時はOFFにします。


ページ・アイテムP1_ENAME_Sの動的アクションは、実行のタイプをスロットル、時間を1000(つまり1秒)、即時はOFFにします。


イベントはキー・プレスです。

それぞれ、ページ・アイテムに文字を入力して動作を確認してみます。

ページ・アイテムP1_ENAME_Iに、文字列SCOTTを入力します。

動的アクションの実行のタイプが即時なので、キー・プレスの度にレポートのリフレッシュが実行されます。SELECT文は、最低でも5回実行されます。


ページ・アイテムP1_ENAME_Dに、文字列SCOTTを入力します。

動的アクションの実行のタイプがデバウンスで時間が1秒なので、SCOTTを入力した1秒後に1度だけリフレッシュが実行されます。SELECT文は、1回実行されます。即時がONのときは最初に1回リフレッシュが実行され、1秒経過するまでは同じイベントによる動的アクションは起動されない、という動作になります。


ページ・アイテムP1_ENAME_Sに、文字列SCOTTを入力します。

動的アクションの実行のタイプがスロットルで時間が1秒なので、SCOTTを入力を開始した1秒後にリフレッシュが実行されます。また、それから1秒経過したら再度リフレッシュが実行されます。実行回数は文字を入力している時間で決まります。即時がONのときは最初に1回リフレッシュが実行されるため、実行回数が1回増えます。


動的アクションを使って、ユーザーの入力に対してアプリケーションの応答を素早くしつつ、データベースへの負荷を減らすことができます。

今回の動作確認に使用したアプリケーションのエクスポートを以下に置きました。
https://github.com/ujnak/apexapps/blob/master/exports/debounce-and-throttle.zip

Oracle APEXのアプリケーション作成の参考になれば幸いです。

完