• 投稿日:2022年02月27日 10時13分16秒
  • 更新日:2022年03月03日 09時32分10秒

デモ

screenLock(msg = "処理中")

                       
function screenLock(msg = "処理中"){

    var element = document.createElement('div');
    element.id = "screenLock";
  
    var inner = document.createElement('div');
    inner.classList.add("inner");

    // 文字を表示する用
    var p = document.createElement('p');
    p.className = "msg";
    p.innerText = msg;
    inner.appendChild(p);
    element.appendChild(inner);
    
    // body要素の子要素に追加
    var objBody = document.getElementsByTagName("body").item(0);
    objBody.appendChild(element);
    lastScreenLockElemID = element.id;
  
}

説明

body要素の子要素に#screenLockを追加し、全面全体に広げることで、他の要素をさわれないようにします。
ロック中に表示するメッセージは引数で任意なものに変えることが出来るようにしています。

screenUnLock()

                       
function screenUnLock(){
    console.log("start[screenUnLock]");
    
    var screenElem = document.getElementById("screenLock");
    if (screenElem) {
        screenElem.parentNode.removeChild(screenElem);
    }

}

説明

#screenLockを取得して、その親要素から見て#screenLockを削除するという処理です。

最後に

私はwindowsアプリケーションの開発をしていた期間が長かったため、非同期処理というのに結構戸惑いがありました。とても便利なのですが、ボタンクリックイベントが動いている最中に他のイベントが動くとか本当にやめて欲しい、、、。