클릭 이벤트 실행 후 코드가 순서대로 작동하지 않고 이상하게 ajax 통신이후에 적용 됩니다.

왜 그럴까요?

$('#id').click(function() {
     $('#id').css({cursor: wait});
     let result = ajax(); // 통신 진행.
     if(result == true) {
         커서복구
     } else {
         커서복구
     }

});

코드는 이렇습니다. 그런데, 코드가 순서대로 변경되지 않고, ajax 통신 이후에 커서변경 css변경이 먹습니다.

이를 어떻게 해야 클릭시에 시작할때 바뀌고 끝날때 원래대로 복구 할 수 있을까요?

ajax before와 complete는 제외해주시면 감사합니다.