Slow execution of jQuery script on WordPress

Question

I have created a WordPress website that uses expandable buttons which show information loaded from another file.

The script in use preloads the external file that contains the information on page load. Then, when a button is clicked, it checks whether or not the information is available and, if it is, the button expands.

The problem is that, even though the file is successfully preloaded, it takes at least 3 seconds for the buttons that have been clicked to be expanded. Having checked the network tab, I believe that the reason for this delay is the fact that the file gets loaded both on page load and every time a button is clicked, for some reason. I just don't know what the exact culprit is.

The script used is the following:

// Load external document on page load
$(document).ready(function () {
 $.ajax({
  url: "absolute/path/to/info/post",
  dataType: "html"
 });
});

// Show button content on click
$("a.ajax-link").click(function (event) {
 event.preventDefault();
 event.stopPropagation(); // Prevent from expanding

 var infoButton = $($(this).attr("href"));

 if (!$(infoButton).hasClass("show")) {

  // Check if the button is collapsed
  if ($(infoButton).attr("data-loaded") != "true") {
   var loadingIcon = $(this).find(".icon-spin"); // Show loading icon
   loadingIcon.css("visibility", "visible");

   var thisLink = $(this);
   var targetUrl = thisLink.attr("data-href");
   var target = thisLink.data("ajaxtarget");

   // Load data
   $(target).load(targetUrl, function () {
    $(infoButton).collapse("show"); // Expand
    $(infoButton).on("show.bs.collapse", function () {
     $(this).addClass("collapsing");
    });
    loadingIcon.css("visibility", "hidden");
   });
  } else {
   $(infoButton).collapse("hide");
   $(infoButton).on("hide.bs.collapse", function () {
    $(this).removeClass("collapsing");
   });
  }
  noMoreAjax();
 } else {
  $(infoButton).collapse("hide");
  $(infoButton).on("hide.bs.collapse", function () {
   $(this).removeClass("collapsing");
  });
 }
});

// FUNCTIONS
function noMoreAjax(item) {
 var linkItem = $(item);
 linkItem.removeClass("ajax-link");
 linkItem.addClass("link-prevent");
 linkItem.unbind("click");
 $(linkItem).click(function (event) {
  event.preventDefault();
 });
}

For what it is worth, let me say that this script works perfectly on static websites, so it is possible that I need to take some WP-related factor that I am not aware of into account. Let me add that I have just started using both WP and jQuery, so I am sure there are a lot of things that I still need to learn.

If there is any other piece of information that could be of use to you, please let me know. Thank you very much for your time.

Answer 1

I don't think I'll be able to point out the exact issue with your script however, I can make some pointers towards improving the performance of it.

Overusing $ is creating new jQuery objects every time, you can store $(infoButton) in a local variable let infoButton = $(infoButton)

Your ajax function doesn't seen to be using the data it's sent to retrieve either, your on the right track with preloading it but you should use that data instead of waiting for load() function to load you data after the button is pressed.