jQuery ajax 成功匿名函数作用域答案

【问题标题】：jQuery ajax success anonymous function scopejQuery ajax 成功匿名函数作用域
【发布时间】：2009-09-22 01:21:50
【问题描述】：

如何从匿名成功函数中更新 returnHtml 变量？

function getPrice(productId, storeId) {
    var returnHtml = '';

    jQuery.ajax({
        url: "/includes/unit.jsp?" + params,
        cache: false,
        dataType: "html",
        success: function(html){
            returnHtml = html;
        }
    });

    return returnHtml;
}

【问题讨论】：

标签： jquery ajax

【解决方案1】：

那是错误的方法。 AJAX 中的第一个 A 是异步的。该函数在 AJAX 调用返回之前返回（或者至少可以）。所以这不是范围问题。这是订购的问题。只有两种选择：

使用 async: false 选项使 AJAX 调用同步（不推荐）；或
改变你的思维方式。您需要传递一个回调，以便在 AJAX 调用成功时调用，而不是从函数返回 HTML。

以(2)为例：

function findPrice(productId, storeId, callback) {
    jQuery.ajax({
        url: "/includes/unit.jsp?" + params,
        cache: false,
        dataType: "html",
        success: function(html) {
            // Invoke the callback function, passing the html
            callback(productId, storeId, html);
        }
    });

    // Let the program continue while the html is fetched asynchronously
}

function receivePrice(productId, storeId, html) {
    // Now do something with the returned html
    alert("Product " + productId + " for storeId " + storeId + " received HTML " + html);
}

findPrice(23, 334, receivePrice);

【讨论】：

Gotchya - 我想我必须这样做。但如果我必须这样做呢？
在不知道您打算如何使用 getPrice() 方法的情况下很难回答这个问题。它是干什么用的？它是如何使用的？这是需要调整的“外部”级别的代码。
好的，我明白了。我没有意识到 productId 和 storeId 会在范围内，我实际上可以将这些东西传递给回调。
@cletus 你不能说不推荐。仅当用户不需要知道请求已发出时，不建议这样做。但是在某些情况下需要 async:false。在不允许用户继续或触发另一个事件的情况下，这是必要的。

【解决方案2】：

简短的回答，你不能，AJAX 中的第一个 A 代表异步，这意味着当你到达 return 语句时请求仍在进行。

您可以使用同步（非异步）请求来实现，但这通常是坏事

类似下面的东西应该返回数据。

function getPrice(productId, storeId) {
  var returnHtml = '';

  jQuery.ajax({
    url: "/includes/unit.jsp?" + params,
    async: false,
    cache: false,
    dataType: "html",
    success: function(html){
      returnHtml = html;
    }
  });

  return returnHtml;
}

但是

除非您真的需要能够立即使用来自 test 的返回值，否则最好将回调传递给 test。类似的东西

function getPrice(productId, storeId, callback) {
  jQuery.ajax({
    url: "/includes/unit.jsp?" + params,
    async: true,
    cache: false,
    dataType: "html",
    success: function(html){
      callback(html);
    }
  });
}

//the you call it like
getPrice(x,y, function(html) {
    // do something with the html
}

编辑 Sheesh，你们说我说的更快 :-)

【讨论】：

设置async: false会阻止浏览器的页面渲染吗？

【解决方案3】：

您那里的匿名函数是否可以访问其范围内的returnHtml 变量，因此那里的代码实际上可以按您的预期工作。您可能出错的地方是您的退货声明。

请记住，AJAX 中的A 代表asynchronous，这意味着它不会同时发生。因此，returnHtml = html 行实际上是在在您调用 return returnHtml; 之后发生的，所以 returnHtml 仍然是一个空字符串。

如果不查看其余代码，很难说应该怎么做才能让它按你的意愿工作，但你可以做的是向函数添加另一个回调：

function getPrice(productId, storeId, callback) {
    jQuery.ajax({
        url: "/includes/unit.jsp?" + params,
        cache: false,
        dataType: "html",
        success: callback
    });
}

getPrice(5, 1, function(html) {
    alert(html);
});

【讨论】：