Javascript フォーム表示/非表示の完了を知る

以下のようなフローで処理を実行しようとしています。
名称は全て仮で、概念だけご理解下さい。

フォームA のコピーボタン押下 (onClick.copy 関数実行)
copy関数内でフォームB を非表示から表示にを切り替える関数を呼ぶ
フォームAの情報をフォームBに転記する (Ajax)

詰まっているのは、2でフォームBの描画が終わる前に
3の値を入れる処理に入ってしまい、転記されずに終わるというものです。

function copy (){
 this.visivleFormB();
 ～Ajax処理～
}

function visivleFormB(){
 Element.show('formB');
}

以下のようにすれば無理やりで実装可能です。

function copy (){
 this.visivleFormB();
 sleep(500);
 ～Ajax処理～
}

function visivleFormB(){
 Element.show('formB');
}

function sleep(waitMsec) {
 var startMsec = new Date();
 while (new Date() - startMsec < waitMsec);
}

SLEEPなんてダサい処理で実装したくありませんし、
100%転記できる保証もありません。

関数内で呼び出す関数の処理が終わり、フォームの描画が完了したかどうかを
判定する方法はありますか？

int32_t

2021/06/16 04:51

Element.show('formB') は具体的にはどういう処理ですか? スタイルを変えて表示しているだけなら、完了を待つ必要などないはずですよね。

m.ts10806

2021/06/16 04:54

「ダサい」という個人的感覚だけで切り捨てるのはいかがなものかと。

iww22673

2021/06/16 05:01

int32_t prototype.jsの標準関数なので display:noneを切り替えるだけかと思います。描画されていないと、Ajaxで値を転記する際に、必要なidが取得できないので、完了を待つ必要があると思います。 m.ts10806 「イケてない実装」というワードはこの業界では、当たり前のように使われるものだと思っています。よりスマートに、確実性の高い実装を目指すのは、エンジニアとして当たり前の感性では？そして、SLEEPを何秒にセットしても使う人の環境の重さ次第では時間が足りず、結果的に必要なデータが転記できないということになります。逆に聞きたいのですが、この実装でいいと思いますか？貴方がレビュー者ならこれで通すのでしょうか？文句を言いたいのではないです。

m.ts10806

2021/06/16 05:07

一部しか提示されてないコードで通すも通さないもないです。コードレビューの依頼でしたか？あくまで「要件が満たせるかどうか」です。こねくり回したとして、スマート（基準が曖昧）にできたとして、要件を満たさなかったりプロジェクトとしての整合性が取れてなければNGです。なので、これだけ見てもレビュー以前の問題、です。

int32_t

2021/06/16 05:17

> 必要なidが取得できないので、完了を待つ必要があると思います。そんなことないです。表示されてなくても、フォームコントロールをIDで参照して値をセットすることはできます。転記する処理内になにか表示に依存したものがあるのでしょうか。

行動規範の内容に同意します

回答1件

Promise等を使ってあげればやりたいことは出来るかなと思いますがいかがでしょう。

javascript
1function copy (){
2  this.visivleFormB()
3  .then(() => {
4    ～Ajax処理～
5  });
6}
7
8function visivleFormB(){
9  return new Promise(resolve => {
10    Element.show('formB');
11    resolve();
12  }
13}