title: function in ajax done is undefined
body: <p>So I know my problem lies within async, but first I don't really understand why. I tried some code examples online still undefined. </p>
  
  <p>What I understand is that once ajax retrieves the data, then the functions in done are being executed. However, googling has been telling me that the functions are being executed before the data has being retrieved, resulting in the function not passing variable thus resulting in undefined. </p>
  
  <pre><code>jQuery.ajax({
    "url": 'https://d.apicloud.com/mcm/api/card?filter={"where":{},"order":"hot;DESC","skip":0,"limit":20}',
    "cache": false,
    "headers": {
      "X-APICloud-AppId": "A694530933",
      "X-APICloud-AppKey": appKey
    },
    "type": "GET"
  }).done(function(data, status, header) {
    //success body
    for (var i = 0; i &lt; data.length; i++) {
      var listliked= "htmlcode"+data[i].id;
      var list20 = "htmlcode"+data[i].user;
      db.selectSql({
        name: 'dm',
        sql: 'SELECT 1 FROM fav WHERE fav.id ="' + data[i].id + '";',
      }, function(ret, err) {
        if (ret.status) {
          if (ret.data[0] != null) {
            $api.append(outputall, listliked);
          } else {
            $api.append(outputall, list20);
          }
        } else {
          alert(JSON.stringify(err));
        }
      });
    }
  }).fail(function(header, status, errorThrown) {
    //fail body
  })
  </code></pre>