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

Question

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

1. フォームA の コピーボタン押下 (onClick.copy 関数実行)
2. copy関数内でフォームB を非表示から表示にを切り替える関数を呼ぶ
3. フォーム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%転記できる保証もありません。

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

Comments

[int32_t]

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

[m.ts10806]

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

[iww22673]

int32_t
prototype.jsの標準関数なので
display:noneを切り替えるだけかと思います。

描画されていないと、Ajaxで値を転記する際に、
必要なidが取得できないので、完了を待つ必要があると思います。

m.ts10806
「イケてない実装」というワードはこの業界では、
当たり前のように使われるものだと思っています。

よりスマートに、確実性の高い実装を目指すのは、
エンジニアとして当たり前の感性では？
そして、SLEEPを何秒にセットしても使う人の環境の重さ次第では
時間が足りず、結果的に必要なデータが転記できないということになります。

逆に聞きたいのですが、この実装でいいと思いますか？
貴方がレビュー者ならこれで通すのでしょうか？

文句を言いたいのではないです。

[m.ts10806]

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

[int32_t]

> 必要なidが取得できないので、完了を待つ必要があると思います。

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

Answer 1

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

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

function visivleFormB(){
  return new Promise(resolve => {
    Element.show('formB');
    resolve();
  }
}

Comments

[iww22673]

ありがとうございます。
確認してみます。