仅在 .ajax 完成时运行代码（在 .ajax 函数之外）答案

【问题标题】：Running code only when .ajax is done (outside of .ajax function)仅在 .ajax 完成时运行代码（在 .ajax 函数之外）
【发布时间】：2015-12-10 20:22:10
【问题描述】：

我正在使用 API 并设法让 .ajax 函数正常工作。现在，我需要在 .ajax 函数之外使用来自 API 的信息。为此，我正在尝试使用 jQuery 的 .done 函数，但它不起作用。我查看了一些类似问题的解决方案，但我没有运气。我尝试了使用和不使用 $.when 函数，但都不起作用。

//create user prototype
function user(name,logo,status,streamLink,streamViews,streamGame){
  this.name = name;
  this.logo = logo;
  this.status = status;
  this.streamLink = streamLink;
  this.streamViews = streamViews;
  this.streamGame = streamGame;
  this.getUserInfo = function(userName) {
    return $.ajax({
      dataType: "jsonp",
      data:{},
      url:'https://api.twitch.tv/kraken/users/'+userName+'?callback=?',
      success:function(data){
        this.name = data.display_name;
        this.logo = data.logo;
        this.bio = data.bio;
        $('.test').html(this.logo);
      }     
       
    }) 
  }
}

//create user for each stream
var freeCodeCamp = new user('freeCodeCamp');
var medrybw = new user('medrybw');
//call getUserInfo function
freeCodeCamp.getUserInfo('freeCodeCamp');
medrybw.getUserInfo('medrybw');


//display medrybw status (test) - not working! 
when(medrybw.getUserInfo()).done(function(data){
  alert('test');
  $('.test2').html(medrybw.bio);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>
<br>
<br>
<div class="test2"></div>

不工作的部分是最后一个功能。如果我删除 $.when 部分，我会得到“测试”警报工作正常，但不是另一行。使用 $.when，两条线都不会运行。我真的很困惑。

【问题讨论】：

你没有$.when。你只有when。
只有在使用多个承诺时才需要使用 $.when。 $.when(x) 与 x 相同。问题在于您的成功回调中的this 不指向该对象（并且when（您使用的）不存在这一事实）。见stackoverflow.com/q/20279484/218196
this 不是你想的那样，在 ajax 的成功中。

标签： javascript jquery ajax asynchronous

【解决方案1】：

如果您使用单个 Promise，则无需使用 $.when。做吧

medrybw.getUserInfo().done(...);

（事实上，如果你向$.when 传递一个promise，它会返回它，即$.when(x) === x）。

如果我删除 $.when 部分，我会得到“测试”警报工作正常，但不是另一行。

线路本身“工作”正常，问题是medrybw.bio 不存在。

success 回调中的this 不指向对象，因此bio 属性永远不会在medrybw 上设置。有关该问题的解决方案，请参阅 How to access the correct `this` context inside a callback?。

我强烈建议自己熟悉浏览器的开发人员工具，以便设置断点和检查变量，更好地分析代码并了解哪些功能有效，哪些无效（而不是草率下结论）。

【讨论】：

感谢大家花时间帮助新手 :-) 我使用 .bind(this) 让它工作，但会继续阅读以确保我理解“this”的工作原理，因为它显然比我想象的要复杂。

【解决方案2】：

您不需要 $.when() 部分。您遇到的问题是 this 指的是 jqXHR 对象，而不是 user 对象，在您的 ajax 调用的 success 函数中。要解决，请使用.bind(this)。

其次，getUserInfo() 需要一个 userName 参数，但是当您稍后调用它时，您会忽略该参数。此外，多次调用getUserInfo() 会导致冗余和不必要的ajax 请求。第一次调用函数时，可以将其替换为只返回原始jqXHR 对象的函数，避免多余的ajax 调用，同时在后续调用中也不需要userName 参数。

//create user prototype
function user(name,logo,status,streamLink,streamViews,streamGame){
  this.name = name;
  this.logo = logo;
  this.status = status;
  this.streamLink = streamLink;
  this.streamViews = streamViews;
  this.streamGame = streamGame;
  this.getUserInfo = function(userName) {
    var jqXHR = $.ajax({
      dataType: "jsonp",
      data:{},
      url:'https://api.twitch.tv/kraken/users/'+userName+'?callback=?',
      success:function(data){
        this.name = data.display_name;
        this.logo = data.logo;
        this.bio = data.bio;
        $('.test').html(this.logo);
      }.bind(this)     
       
    });
    this.getUserInfo = function(){return jqXHR;};
    return jqXHR;
  }
}

var medrybw = new user('medrybw');
medrybw.getUserInfo('medrybw');

//display medrybw status (test) - not working! 
medrybw.getUserInfo().done(function(data){
  console.log(data);
  $('.test2').html(medrybw.bio);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test"></div>
<br>
<br>
<div class="test2"></div>

【讨论】：