for循环里面写了ajax

问题遇到的现象和发生背景

for 循环里写 ajax 网页加载速度变 慢 了

问题相关代码，请勿粘贴截图

var ids = document.querySelectorAll('.align-self-start');
var skus = document.querySelectorAll('.TransitQty');
// console.log(ids);
// console.log(skus)
for (var i=0;i<ids.length;i++){
// console.log(ids[i].innerHTML)
var id = ids[i].innerHTML;
skus[i].innerHTML=getContent(id);
function getContent(id)
{
$.ajax({
type: "POST",
data: "id=" + id,
dataType: "json",
async:false,
url: '/Order/GetUseQty',
success: function(data) {
content = data.TransitQty
}
});
return content
}
}

运行结果及报错内容

没有报错 数据 也一切 正常 就是 加载速度 变慢了

我的解答思路和尝试过的方法

商品的 详情页 用的ajax 获取的 该商品的 data.TransitQty 数据 想的 是在主页 也显示 该数据，主页每页 有 20条数据 就把ajax 写在了for循环里

我想要达到的结果

建议调整后端接口把需要查询的id都传过去，一次sql或者其他查询出来返回，性能问题，从问题根本下手解决

从代码上，function getContent(id)这个不应该写在for里面，放到外面出来，for里面直接调用就可以
从性能上，不建议这样去跟服务器交互，很耗性能