javascript - 当页面上有多个相同的 ajax 调用时，如何加快我的 Ajax 调用速度？

Question

当页面加载时，我也在动态创建一个 block 。我使用 ajax 调用从另一个页面获取数据，然后填充它并创建我的结构，然后将其添加到特定的 dom 元素。然而，问题是当我在页面加载期间在页面上执行此操作多次时，所有 Ajax 调用都需要相当长的时间才能完成。你知道如何加快ajax调用速度吗？

      $('.content-tile').each(function (idx, ele) {

    // Step 1: Get the stuffs and add it in the right place on page load
    var node_id = $(ele).find('article').attr('data-history-node-id');
    $.get('/node/' + node_id , function (data) {

      var $title = $(data).find('.title').text();
      var $summary = $(data).find('.article__body').text();
      var $ctaText = $(data).find('.article__field-read-more-text').text();

      var $redirectToFile = $(data).find('.article__field-nova-redirect-to-file').find('a').attr('href');
      var $redirectToLink = $(data).find('.article__field-redirect-link').find('a').attr('href');

      // Either redirect to file or redirect to link in the order
      var $ctaLinkHref = $redirectToFile;
      if ($redirectToLink) {
        $ctaLinkHref = $redirectToLink;
      }

      var $contentHover = "<a class='content-added contenthover hoveredLink' href= " + $ctaLinkHref + "></a>";
      $(ele).find('article').after($contentHover); // Add the div that will be targeted for the hover

      var $contentHoverHeader = "<h2 class='contenthover__header'>" + $title + '</h2>';
      var $contentHoverContent = "<p class='contenthover__content'>" + $summary + '</p>';


      var $contentHoverLink = "<a class='contenthover__link' href=" + $ctaLinkHref + '>' + $ctaText + '</a>';

      $(ele).find('.contenthover').append($contentHoverHeader, $contentHoverContent, $contentHoverLink);
    });
  });

Answer 1

正如 Rory 提到的，无需多次调用，只需创建单个对象，将其发回并一次性返回所有相关数据。

// construct the array
var nodes = []
 $('.content-tile').each(function (idx, ele) {
  var node_id = $(ele).find('article').attr('data-history-node-id');
  nodes.push(node_id);
}

// call ajax now
$.ajax({
  url: "/node/RetrieveDataByNodes", //the new method which can accept the array and return data
  data: JSON.stringify(nodes),
  type: 'GET',
  dataType: 'json'
}).done(function(result) {
  $.each(result, function (k, v) {
     //do something for each value
     console.log(v);
  }
});