Jquery $.post() 变量范围答案

【问题标题】：Jquery $.post() variable scopeJquery $.post() 变量范围
【发布时间】：2009-08-09 18:22:19
【问题描述】：

我没有大量使用 JavaScript 的经验，并且在使用可变范围和 jquery 时遇到了麻烦。我有以下结构：

function pass_variables()
{
    username = "efcjoe"
    response = post_variables(username)
    alert(response)
}

function post_variables(username)
{
    $.post(
        '/path/to/url/',
        {
            'username': username,
        },
        function(data)
        {
            valid = (data != 0) ? true : false

            // OPTION 1: If I put return here...
            return valid; // ... the alert box in pass_variables says "undefined"
        },
        "text"
    );

    // OPTION 2: If I put return here...
    return valid; // ... The alert box does not pop up, and Safari debug gives
                  //     me the error: "Can't find variable: valid"
}

我错过了什么吗？我认为valid 应该是一个全局变量，因此选项 2 应该可以正常工作。我真的不确定选项 1。

任何人都可以给我任何建议，让我知道如何以最好的方式完成这项工作吗？

非常感谢。

【问题讨论】：

Eww，尽可能少的全局变量。在这种情况下，你做错了。

标签： javascript jquery scope

【解决方案1】：

Ajax 调用是异步的，这意味着它们会被调用但会等待执行完成。基本上，您的警报在 ajax 请求完成之前触发并运行回调函数来更改您的变量。

你能做的最好的事情就是在 ajax 请求完成时传递一个函数来运行。这也消除了对全局变量的需求，因为其他插件、脚本可以改变它们的状态并使您的脚本容易出现错误、缺陷等

例如

function foobar(){

   //call function to do post request and also pass a function to run
   //when post has returned
   runPostRequest( callbackFn );

}

function runPostRequest(callback){

    $.post( '/foo', callback );

}

function callbackFn( data ){

   console.log('post request complete');

}

【讨论】：

【解决方案2】：

在你的选项1中，你是从回调函数返回的，它的返回值永远不会被使用，因为这个函数只在Ajax请求结束时被调用。

在选项 2 中，您从主函数返回，但该返回发生在回调函数为您的 valid 变量分配任何值之前。

我会以这种方式重构您的代码，而不使用全局变量：

function post_variables(username){
  $.post('/path/to/url/',{
    'username': username,
  },
  function(data){
    var valid = data != 0;

    // OPTION 3: Work in the callback function
    alert(username);
    alert(valid);

    // OPTION 4: Pass the values and work on another function
    otherFunction(username, valid);
  },"text");
}

function otherFunction(username, isValid){
  //...
}

【讨论】：

【解决方案3】：

是的，您的问题是您在这里没有掌握一些操作顺序问题。您传递给$.post 的函数是一个回调；它运行较晚，在post_variables() 完成之后相当长。 post_variables() 本身不会等待 $.post 完成，因此当您尝试使用它时，valid 不存在。

【讨论】：

【解决方案4】：

请记住，AJAX 是异步的。 return valid; 会在$.post() 设置之后立即执行，但在帖子完成之前（因此，在valid 定义之前）。您可能想要做的是：

function post_variables(username)
{
    var username = "efcjoe";

    $.post(
        '/path/to/url/',
        {
            'username': username,
        },
        function(data)
        {
            var valid = (data != 0) ? true : false
            alert(valid);
        },
        "text"
    );
}

请注意，这不再需要全局变量，而是使用 var 声明的函数范围变量。

【讨论】：

【解决方案5】：

你可以很容易地解决这个问题，给它分配一个函数而不是一个内联函数，并且事件函数会发出警报：

function pass_variables()
{
    username = "efcjoe"
    response = post_variables(username);
}

function post_variables(username)
{
    $.post(
        '/path/to/url/',
        {
            'username': username,
        },
        receivedData,
        "text"
    );
}

function receivedData(data)
{
    valid = (data != 0) ? true : false;
    alert(valid)
}

【讨论】：