So I have a webpage that loads a list of content from a php server-side script, sorts it on the client side and adds the final list to a div in the webpage. When loading the page a button press pulls up the list something like

  searchRequest = $.ajax(
  {
        type: "GET",
        // blah blah blah 
        async: true,
        success: function(data)
        {
              sortTheData(data)
              addTheDataToThePage(data)


        }
  });

After a bit of testing I figured out that the jquery ajax request was working async as it was supposed to, but the page was still hanging during loading while sorting the list.

What I want to do is have the sorting and adding functions in the success function start at that point, but run without blocking the rest of the page from running smoothly (ie in its own thread, but still adding its results to the page at the end).

Ive tried running the sort & add parts in an async function, as well as wrapping it in a promise return, but the page still seems to hang whenever it reaches the sorting stage.

Do I need to use some sort of Web Worker to do this, or is there a way of doing it in pure javascript?