Question about synchronous ajax call in JS

With below code, what I was expecting is “diameter-selected” class to be added to the button and then to run the synchronous ajax calls. But, it seems that ajax calls run before the “.addClass” command and since it is waiting the promise I guess, I see the button effect after ajax request is completed. When I added setTimeout to the ajax calls for 1 nano second, I see the button effect before ajax calls are completed. So, I solved my issue in a weird way but I want to learn if there is a more professional way to achieve this.

    $(document).on("click", ".btn-diameter", function(){

       $(this).addClass("diameter-selected");

       $.ajax({
         method: "POST",
         async: false,
         url: "/page1.asp"
       });

       $.ajax({
         method: "POST",
         async: false,
         url: "/page2.asp"
       });

    });