-1

コードは次のとおりです。

var ret;
function fetch_data(param1){
  $.post(param1,
        function(data){
          if (data){
            ret = data*2;
            console.log("data", ret);
          }
          else{
            ret = 15;
            console.log("no data")
          }
        });
  return ret;
}

function hello(){
  ret = fetch_data("/post_data");
  console.log("from the main function", ret);
}

上記は、私が物事をどのように扱っているかを簡略化したスキーマです。URLにPOSTリクエストを送信し、戻り値に基づいて値を取得しようとします。値を操作して、関数に戻そうとします。console.logは関数内の値を示していますが、関数内の値は示していfetch_dataませんhello。値が返されないことを意味します。どこが間違っているのですか？

4

1 に答える 1

4

javascriptが最初のajax呼び出しを行った後、スクリプトの実行はreturnステートメントに進みます。この時点では、リクエストへの応答はまだ返されていないため、コールバック関数は実行されていません。つまり、retに値が割り当てられていません。retに値が割り当てられていることを保証するには、コールバック関数内にhelloの呼び出しを含める必要があります。

  var ret;
    function fetch_data(param1){
      $.post(param1,
            function(data){
              if (data){
                ret = data*2;
                console.log("data", ret);
              }
              else{
                ret = 15;
                console.log("no data")
              }
              hello();
            });
    }

function hello(){
  ret = fetch_data("/post_data");
  console.log("from the main function", ret);
}

Ajaxがサーバーにアクセスする方法は2つあります。これらは同期（スクリプトが停止し、サーバーが応答を返すのを待ってから続行する）と非同期（スクリプトがページの処理を続行できるようにし、応答が到着した場合に応答を処理する）です。関数は非同期で実行されています。つまり、fetch_data関数はajax呼び出しが完了する前にreturnステートメントを実行しています。

イベントの順序：

  1. fetch_dataが呼び出されます
  2. fetch_dataはajaxリクエストを起動します。
  3. データのフェッチはret（未定義）を返します
  4. hello関数はretをコンソールに出力します
  5. ajax応答がサーバーから受信されました
  6. retには、ajax応答に基づいて値が割り当てられます

私がより良いアプローチであると私が考えるものにあなたのコードを修正することをさらに提案したいと思います。このアプローチは、コールバック内でhello関数を指定するよりも意図をうまく捉えていると思います。

    function fetch_data(param1,callback){
      $.post(param1,
            function(data){
              callback(data);
            });
    }

function hello(data){
    if (data){
       ret = data*2;
       console.log("data", ret);
     }
     else{
       ret = 15;
       console.log("no data")
     }
  console.log("from the main function", ret);
}

function hello2(data){
  //...different logic that modifies data
  console.log("from the main function", ret);
}

//Function call passing the hello function as a parameter
fetch_data('/post_data', hello);

//Function call that passes hello2 function as a parameter
fetch_data('/post_data', hello2);
于 2012-04-14T17:05:40.160 に答える