AJAX 请求很慢，在其他页面上找不到解决方案

Question

我最近开始使用 ajax 请求。我的请求正在运行，但加载需要几秒钟。

代码-

var x = 0;
function makeTR(){
    var appendObject = "<tr>";
    for(var i = 0; i < 3; i++){
        $.ajax({
            async: false,
            type: 'GET',
            url: domain + Players[x] + domain2, 
            success: function(data) {
                appendObject = appendObject + "<td>" + makeTD(data.player, data.rank, data.guild_rank, data.fame, data.last_seen) + "</td>";
                x++;
            }
        });
    }
    appendObject = appendObject + "</tr>";
    return appendObject;
}

如果你需要更多代码，我会给你，不过这是唯一有任何真实代码的部分。

对不起，如果还有其他帖子，我找了一会儿。

提前致谢！

Answer 1

正如评论中所述，您的代码很慢，因为它一个接一个地执行 ajax 请求，如果每个请求需要一秒钟，那么您的函数需要三个。您需要采用异步代码，并使用 Promise 和/或回调使其并行工作。下面是一个使用 Promise 的例子。

// this function returns a 'promise'
function makeTr() {
   var requests = []

   // Don't use async: false, but collect the return values of $.ajax. 
   // Those are promises, which you can use in other calls.
   for (var x=0; x<3; x++) requests.push($.ajax(domain + Players[x] + domain2))

   // Wait until all promises are resolved, then perform the 
   // rendering function. The first return below returns a 'promise'
   // of your 'appendObject'
   return Promise.all(requests).then(function(allData) {
      // allData is an array containing the results of your $.ajax
      // calls now. 
      var appendObject = ""
      for (var x=0; x < 3; x++) {
        var data = allData[x]
        appendObject += "<tr>"
        ....
        appendObject += "</tr>"
      }
      return appendObject 
   })
})

现在你可以这样调用函数了

makeTr().then(function(rows) {
  $(...).append(rows)
})

但您最好阅读一般的承诺和回调以及异步 javascript。因为这是 javascript 最好的部分。

Answer 2

$.ajax({
        type: 'GET',
        cache : false,
        url: domain + Players[x] + domain2, 
        success: function(data) {
            appendObject = appendObject + "<td>" + makeTD(data.player, data.rank, data.guild_rank, data.fame, data.last_seen) + "</td>";
            x++;
        }
    });