Ajax async false won't move to next step

Question

I am using async false to execute ajax request using following code but it won't go to next step of stepper upon success.

setTimeout(function() {
  $.ajax({
    url: 'quote/request' + '?_token=' + '{{ csrf_token() }}',
    type: 'post',
    dataType: 'json',
    cache: false,
    async: false,
    data: $('form#msform').serialize(),
    success: function(data) {
      request_success = true;
      setTimeout(function() {
        $("#wait").css("display", "none");
        $("#flow_pay0").attr("disabled", false);
        $("#flow_pay0").css("background", '#0293EB');
      }, delay);
      ////////////
      //    $('#msform')[0].reset();
      current_fs = $(this).parent();
      next_fs = $(this).parent().next();
      next_fs.show();
      //hide the current fieldset with style
      current_fs.animate({
        opacity: 0
      }, {
        step: function(now) {
          // for making fielset appear animation
          opacity = 1 - now;

          current_fs.css({
            display: 'none',
            position: 'relative',
          });
          next_fs.css({
            opacity: opacity
          });
        },
        duration: 600,
      });
      ///////////
    },
    error: function(request, status, error) {
      isValid = false;

      var errors = request.responseJSON;
      // $('#result2').show();
      if (errors) {
        $.each(errors, function(key, value) {
          $('#result2').html(
            `<div class="alert alert-danger"><button type="button" class="close">×</button>${value}</div>`
          );
        });
      }
      window.setTimeout(function() {
        $('.alert')
          .fadeTo(500, 0)
          .slideUp(500, function() {
            $(this).remove();
          });
      }, 50000);

      $('.alert .close').on('click', function(e) {
        $(this).parent().fadeTo(500, 0).slideUp(500);
      });
    },
  });
}, delay);

It works without async false but I need it. This ajax being called on button click event.