在 AJAX 请求之外设置变量答案

【问题标题】：Set variable outside AJAX request在 AJAX 请求之外设置变量
【发布时间】：2012-12-24 05:43:08
【问题描述】：

我正在尝试创建一个 ajax 函数，该函数从页面返回特定字符串，然后将其设置在我创建的类中。但是，当我尝试在 ajax 成功参数中调用 this.setGlideUser 时，它告诉我

object has no function setUserGlide.

当我尝试在成功参数之外调用this.setUserGlide，然后查看_glideUser 的值时，_glideUser 是未定义的。这是我的代码的 sn-p。

function main()
{
    this.start = true;
}

main.prototype.load = function()
{
    var _glideUser;
    $.ajax(
    {
        url: '/home',
        dataType: 'text',
        success: function(data)
        {
            // Truncated
            _glideUser = unescape(data).match(pattern);
        }
    });
    this.setGlideUser(_glideUser);
    return 1;
}

main.prototype.setGlideUser(user)
{
    return this._glideUser = user;
}

main.prototype.getGlideUser()
{
    return this._glideUser;
}

var _main = new main();
_main.load();
// check that the ajax has completely loaded
_main.getGlideUser(); // returns undefined

我想不出在 Ajax 成功函数的主类中设置 _glideUser 变量的方法。我想在另一个函数中获取_glideUser 的值，用它做事。有什么建议么？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

没有this._glideUser，因为_glideUser 是您的load 函数的本地函数。不要在load 中声明var _glideUser，而是将其设置为构造函数中的公共属性：

function main()
{
    this.start = true;
    this._glideUser = null;
}

（您对setGlideUser 的第一次调用实际上会创建这样一个属性，但同时拥有这两个属性不会令人困惑吗？）

另外，正如其他人所提到的，您正在尝试setGlideUser在您的 ajax 操作完成之前。您需要通过 success 回调来执行此操作：

main.prototype.load = function()
{
    var that = this;
    $.ajax(
    {
        url: '/home',
        dataType: 'text',
        success: function(data)
        {
            that.setGlideUser(unescape(data).match(pattern));
        }
    });
    return 1; // what's the point?
}

【讨论】：

行得通，谢谢！我没想过要设置var that = this; 声明，但这正是我需要的。

【解决方案2】：

我对 jQuery 不太熟悉，但 ajax 请求可能是异步的，因此您必须从 ajax 成功调用内部调用 setGlideUser，只需将引用变量添加到您的实例并从那里调用它：

var self = this;
$.ajax(
{
    url: '/home',
    dataType: 'text',
    success: function(data)
    {
        self.setGlideUser(unescape(data).match(pattern));
    }
});

给你一个快速提示是，你可以像这样在 js 中使用 getter 和 setter：

main.prototype.__defineSetter__("glideUser", function(value)
{
    this._glideUser = value;
});

main.prototype.__defineGetter__("glideUser", function()
{
    return this._glideUser;
});

编辑：实际上，这些东西见 cmets

【讨论】：

很高兴您建议实际的访问器属性，但 __defineGetter__/__defineSetter__ 既非标准又不推荐使用。执行此操作的标准 (ES5) 方法是使用 Object.defineProperty。
哦，谢谢指出，我在 javascript 上有点过时了

【解决方案3】：

success 在请求返回之前不会被调用。它是异步的。当数据值可用时，您需要在成功本身内调用该方法。

main.prototype.load = function()
{
    var _glideUser, that = this;
    $.ajax(
    {
        url: '/home',
        dataType: 'text',
        success: function(data)
        {
            // Truncated
            var = _glideUser = unescape(data).match(pattern);
            that.setGlideUser(_glideUser);
        }
    });
    // this.setGlideUser(_glideUser); this is incorrect
    return 1;
}

【讨论】：

【解决方案4】：

关键字 this 表示当前范围，在这种（双关语）情况下是 ajax 对象。您需要通过将 me 分配给外部对象中的 this 来引用外部 this 对象。

main.prototype.load = function()
 {
    var _glideUser;
    var me = this;
    $.ajax(
    {
        url: '/home',
        dataType: 'text',
        success: function(data)
        {
            // Truncated
            _glideUser = unescape(data).match(pattern);
            me.setGlideUser(_glideUser);
        }
    });
    return 1;
}

【讨论】：

【解决方案5】：

尝试在 ajax 成功参数中调用 this.setGlideUser

那是正确的。但是，success 方法中的 this keyword 指向 jqXHR 对象，而不是您的 main 实例；你需要取消引用它：

var that = this;
$.ajax({
    url: '/home',
    dataType: 'text',
    success: function(data) {
        _glideUser = unescape(data).match(pattern);
        that.setGlideUser(_glideUser);
    }
});

【讨论】：