javascript - jquery在函数ajax函数中存在全局变量问题

Question

以下是代码：

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函数内部的值。表示不返回任何值。我在哪里弄错了？

Answer 1

在您的 javascript 进行初始 ajax 调用之后，脚本的执行将继续执行 return 语句。此时尚未返回对您请求的响应，因此您的回调函数尚未执行，这意味着尚未为 ret 赋值。您需要在回调函数中包含对 hello 的调用，以确保已为 ret 分配了一个值。

  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 可以通过两种方式访问​​服务器。它们是同步的（脚本停止并等待服务器在继续之前发送回回复）和异步的（脚本允许页面继续被处理并在回复到达时处理）。您的函数正在异步执行，这意味着 fetch_data 函数在 ajax 调用完成之前执行 return 语句。

事件顺序：

1. fetch_data 被调用
2. fetch_data 触发 ajax 请求。
3. 获取数据返回 ret(undefined)
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);