javascript でのウェイトについて

Question

javascript で
ajax でＤＢからある値を取得し（処理Ａ）、
その値を元に、
次に処理(処理Ｂ）を行おうとしているが、
記述順は、処理Ａ、処理Ｂの順に書いてあるが、

処理Ｂが先に、
値が代入されないまま呼び出されてしまいます。

処理Ａの中に alert を入れて確認すると
値は取れていますが、

画面に表示される順番が
処理Ｂのalert のあと 処理Ａの中のakert が表示されてしまいます。

var get_id;

functuin getid() {
get_id="123";
alert('function getid='=get_id);
}

//相手のIDを取得する
getid();
alert('id='+get_id);
処理Ｂ
とすると
まず
id=
が表示され
その後

function getid=123

が表示されてしまいます

確実に代入されたget_id を処理Ｂで使いたいのですが
良い方法はありますか？

Answer 1

AJAXは非同期処理なので、AJAX呼び出し後の処理はコールバックとして書きます。
onSuccessの際に処理Bを行なうようにするわけです。

Comments

[it_solution_lab]

ご指摘のとおり、
ajax の呼び出された関数の内部でsuccess に
さらに関数呼び出しを記述し

別途処理Ｂだけを切り出した関数を作成して、うまく行きました

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

Answer 2

すみません、間違えて投稿したのでここでレス書きます。
getidで実際はajaxをしているということでしたら
他のお二人の回答のようにコールバック関数で対応するのがいいと思います。

function getid(callback) {
     // ～～ajax処理省略～～
     // ajax完了後に処理呼び出し
     if(typeof callback == "function")
     {
         // 第一引数に取得したidを渡す
         callback(get_id);
     }
}

// コールバック関数定義
function alert_id(id)
{
     alert('id=' + id);
}

// getidの第一引数にコールバック関数を渡す（実際はここで実行される）
getid(alert_id);

Answer 3

まず実行したコードは以下の通りですか？（幾つかシンタックスエラーを修正）

var get_id;
function getid() {
  get_id = '123';
  alert('function getid=' + get_id);
}
getid();
alert('id=' + get_id);

そんな馬鹿なと思いコンソールで試しましたが出力結果は以下の通りでした。

function getid=123
id=123

このコードではなく、getid()がajaxでなんらかの処理をした結果ということでしたら話が変わってきます。

Comments

[it_solution_lab]

function getid() {
get_id = '123';
alert('function getid=' + get_id);
}

は　実際は ajax の関数です

別ファイルにあるので、関数の例として書きましたが紛らわしかったですね

非同期なので、先に alert id= が表示されます

Answer 4

どのような方法でajaxを実現しているか分かりませんが、基本的に以下のようなロジックを採用するのが一般的だと思います。

１．ajax通信を同期的に行う
２．ajax通信を非同期で行い、通信終了時のコールバック関数内で取得した値を処理する

よほど通信時間が短い事が保証されていない限り、２．が推奨されます。
コールバック関数の指定は、XMLHttpRequestオブジェクトでしたらonreadystatechangeプロパティになります。
jQueryでしたら、$.ajax関数のsuccessオプションになります。

Comments

[it_solution_lab]

ご指摘のとおり、
ajax の呼び出された関数の内部でsuccess に
さらに関数呼び出しを記述し

別途処理Ｂだけを切り出した関数を作成して、うまく行きました

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