AJAX请求很慢,无法在其他页面上找到解决方案

时间:2016-08-01 02:43:42

标签: javascript jquery ajax

我最近开始使用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;
}

如果你需要更多代码,我会把它给你,这是唯一有真正代码的部分。

对不起,如果有另外一篇帖子,我找了一会儿。

提前致谢!

2 个答案:

答案 0 :(得分:2)

如评论中所述,您的代码很慢,因为它一个接一个地执行ajax请求,如果每个请求需要一秒钟,则您的函数需要三个。您需要拥抱异步代码,并使用promises和/或回调来使其并行工作。以下是使用promises的示例。

// 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的最佳部分。

答案 1 :(得分:-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++;
        }
    });