はじめに

先日下記の事象について苦戦し、自分なりの結論までたどり着いたので共有します。

現在携わらせていただいている業務システムの UX を改善するため、JavaScript イベントによる .NET メソッドの呼び出しを実装していた際、表題の事象が発生しました。
UX の改善についてですが、今回はとあるデータの更新処理を行う際、現行システムではボタン押下を契機としていましたが、ボタンの押し忘れによる更新漏れが見受けられたため、ユーザーが最後にキーを押した時点からの経過時間を契機として、半強制的に更新処理を呼び出すよう改修したいと考えました。

事象

苦戦したのは、setTimeout 関数によってｎミリ秒間待機している最中に、別操作による画面遷移やブラウザの再読み込みが発生すると、コールバック関数が失われてしまうという事象についてです。

原因

画面遷移や再読み込みなどブラウザが更新される際 HTTP 通信が発生しますが、HTTPプロトコルの持つステートレス性という性質（状態を保持しない）が起因して、リクエスト前のブラウザの状態をレスポンス時には失っていたことが原因だと考えられます。

JavaScript について

JavaScript とはシングルスレッドでノンブロッキングかつ、非同期処理や並行処理が可能なスクリプト言語です。
※ V8 などモダンな JavaScript エンジンでは、実行効率や速度を向上させるため、インタプリタを使用せず JIT（実行時）コンパイラによって処理されています。

JavaScript ランタイム（実行環境）

次に JavaScript ランタイムが提供する以下の主要なコンポーネントについて説明します。

JavaScript エンジン

コードの変換
JIT コンパイラによって、JavaScript コードをマシンコードへ変換します。
メモリ領域の割り当て
以下のルールに沿ってメモリ領域の割り当てをします。
- スタック領域
  関数やオブジェクトの参照やプリミティブ型はコンパイル時に必要なメモリサイズが決定するため静的にメモリ領域の割り当てが行われます。
- ヒープ領域
  関数やオブジェクトの実体は実行時に必要なメモリサイズが決定するため動的にメモリ領域の割り当てが行われます。
コールスタック
実行中の関数や関数の階層状態を記録している LIFO 方式のデータ構造で、関数は呼び出されるとコールスタックへ Push され、処理を終えるとコールスタックから Pop されます。

Web APIs

ブラウザが提供する Web API とその実行環境のことです。コールスタックから非同期関数等が呼び出されると、対象の API を実行し、引数として受け取ったコールバック関数を、条件を満たすまで Web API Container で保持します。API の条件を満たした場合、Web API Container で保持していたコールバック関数を、コールバックキューへ Push します。

コールバックキュー

非同期関数の処理を終えたコールバック関数を保持しておく FIFO 方式の領域です。

イベントループ

コールスタックが空になる度に、コールバックキューで保持しているコールバック関数をコールスタックへ追加します。

JavaScript 実行処理フロー

ブラウザで JavaScript が実行される際は以下の流れで処理が進みます。

ブラウザで読み込まれた JavaScript コードが JIT コンパイラによってマシンコードに変換され、データの種類に応じたメモリ領域の割り当てを行う。
呼び出された関数はコールスタックへ Push される。例えば関数Aで関数Bが呼び出された場合、同様にコールスタックへ Push される。
非同期関数が呼び出された場合、ブラウザが提供している Web APIs から対象の API を呼び出し、引数として渡したコールバック関数は Web API Container へ登録され条件を満たすまで待機する。
待機中のコールバック関数は API の条件を満たすと、コールバックキューへ Push される。
コールスタックで処理を完了した関数はコールスタックから Pop される。
コールスタックが空の場合、コールバックキューで待機しているコールバック関数は、イベントループによってコールスタックへ Push される。

サンプルプログラム

qiita.cshtml

<div>@Html.EditorFor(model => model.ITEM, new { htmlAttributes = new { @onkeyup = "return keyUp();" } } )</div>
<input type="submit" id="btn" formmethod="post" formaction="/controller/action" style="display:none;" />

qiita.js

/*BeginFormなどは省略しています。*/
function setTimer() {
    var timer;
    
    function keyUp() {
        clearTimeout(timer);
        timer = setTimeout(updateData, n);
    }
    
    function updateData() {
        document.getElementById("btn").click();
    }
}