document.readyState の値が常に「complete」のままとなってしまう（IE → Chrome対応）

Question

社内のWEBシステムについて、IE→Chromeの置き換え対応を実施しております。
その中で「ボタンの二重クリックを抑止する機能」について
IEの時にはローディング中に再度クリックすると以下の箇所で「loading」が格納されており
alertが出力されておりました。

return (document.readyState != null && document.readyState != "complete");

しかしChromeで実行いたしますと
ローディング中にクリックした場合でも「complete」が格納されてしまい
二重クリックが抑止できない状況（ alert("処理中です…") が出力されない）となります。

Chromeで動作が想定通りとなるようにする方法についてご教授いただければ幸いです。

また、Javascript自体初学者となりますので情報に不足など御座いましたら
大変お手数ですが、ご質問いただけますと幸いです。

以上、よろしくお願いします。

// 画面ロード処理
onload = function () {
    return window_Load();
}

function window_Load() {
    var i;

    for (i = 0; i < document.links.length; i++) {
        var item = document.links[i]
        Object.Aspect.around(item, "onclick", checkLoading);
    }

    var items = document.body.getElementsByTagName('input');

    for (i = 0; i < items.length; i++) {
        var item = items[i];

        if (item.type == "button" ||
            item.type == "submit" ||
            item.type == "reset" ||
            item.type == "image"
            ) {
            Object.Aspect.around(item, "onclick", checkLoading);
        }
    }

    for (i = 0; i < document.forms[0].elements.length; i++) {
        var item = document.forms[0].elements[i];

        if (item.type == "text" ||
            item.type == "button" ||
            item.type == "submit" ||
            item.type == "reset" ||
            item.type == "checkbox" ||
            item.type == "radio" ||
            item.type == "select-one" ||
            item.type == "select-multiple" ||
            item.type == "textarea" ||
            item.type == "password"
            ) {
            try {
                item.focus();
                break;
            } catch (e) {
                //
            }
        }
    }

    return true;
}

// 2度押し抑止アスペクト
var checkLoading = function (invocation) {
    if (isDocumentLoading()) {
        alert("処理中です…");
        return false;
    }

    return invocation.proceed();
}

// 画面描画が終わったかどうか
function isDocumentLoading() {
    return (document.readyState != null && document.readyState != "complete");
}

// アスペクト用
Object.Aspect = {
    _around: function (target, methodName, aspect) {
        var method = target[methodName];

        target[methodName] = function () {
            var invocation = {
                "target": this,
                "method": method,
                "methodName": methodName,
                "arguments": arguments,
                "proceed": function () {
                    if (!method) {
                        return true;
                    }

                    return method.apply(target, this.arguments);
                }
            };

            return aspect.apply(null, [invocation]);
        };
    },
    around: function (target, methodName, aspect) {
        this._around(target, methodName, aspect);
    }
}

Answer 1

あらゆるナビゲーションで document.readyState が変化してしまうのは IE のバグだと思いますが、HTML標準の範囲内であらゆるケースでナビゲーション中かどうかを判定できる手段はない気がします。

---

現在のdocumentを置き換えるようなナビゲーション(ロード完了状態を検知する必要がない)だけなら、checkLoading() 中でグローバル変数をチェック・更新すればいいでしょう。

var isLoading = false;
var checkLoading = function(invocation) {
    if (window.isLoading) {
        alert("処理中です…");
        return false;
    }
    window.isLoading = true;
    return invocation.proceed();

ページ内リンクなどdocumentを置き換えないケースを除外する必要があります。

---

target属性でiframeや別のウィンドウがナビゲーション先になっていてそのウィンドウにアクセスできるなら、その document.readyState を見ることができます。

target=_new target=_blank で新規ウィンドウを開いたり、ナビゲーション元やナビゲーション先が別オリジンのURLの場合はまったく手段がないように思えます。

Comments

[TomatoSaba]

回答ありがとうございます！

実装させていただきました。
書いていただいている通り、画面が完全に切り替わるような箇所では問題なく動作いたしました！
しかし、画面を書き換えない処理ですと「処理中です...」がその後何を押しても出てしまいます。
（Javascriptで入力チェックし、チェックに引っかかるとアラートを出し処理を終了するような場合）

上記の様な画面が切り替わらない箇所には異なる仕組みを実装しようと考えておりますが
もうしばらくお時間がかかりそうです・・・。

取り急ぎご連絡いたします。

[TomatoSaba]

お世話になっております。

ご提示いただいた方法を導入させていただきました。

上記しております、「Javascriptで入力チェック」するような箇所では
入力チェック後に
var isLoading = false;
とフラグを戻すことで動作いたしました。

基本的な個所で時間を要してしまい、返答にお時間いただき申し訳ございません。
こちらのソースに基づいたご提案を頂けました為
ベストアンサーとさせていただきます。

ありがとうございました。

Answer 2

非同期処理の読み込み中かどうかをチェックするならこんな感じではよいのでは？

<script>
var isLoading=false;
function fetchItem() {
  if(!isLoading){
    fetch(url).then(res =>res.text()).then(x=>{
      console.log(x);
      isLoading=false;
    });
  }
  isLoading=true;
}
</script>
<input type="button" id="btn" value="btn" onclick="fetchItem()">

Comments

[TomatoSaba]

回答ありがとうございます！
明日出社いたしましたら、試してみます。
その後結果をご報告させていただきたいと思います。

[TomatoSaba]

ご提案頂いた内容について実装してみましたが
現状、上手く動作しておりません・・・。

ご提示のソースですと
「onclick="fetchItem()"」をつけたボタンのみ
ロード中かどうかを判定してくれるという認識かと思います。
それを全てのボタンに反映する。と言う所でつまってしまい
もうしばらくお時間を頂くことになりそうです・・・。

取り急ぎご連絡いたします。