Stop previous ajax when new request is made using ajax

I am using Toast tui calendar https://nhn.github.io/tui.calendar/latest/ and I have an issue with ajax calling. It works correct except one thing, when I try to get data with the same option more than one times returns the new response but also still return the data of the previous response. please help me how can i resolve that thank u.

I think that there is something that I've missed.

controller

public function getBookingSlot(Request $request){

        $userBookings = Booking::where('room_id',$request->room_id)->where('booking_status',1)->get();
       foreach($userBookings as $booking){
            $events []  = [
                'id'            => $booking->id,
                'calendarId'    => $booking->id,
                'title'         => 'Booked',
                'category'      => 'time',
                'dueDateClass'  => '',
                'start'         => $booking->start_datetime,
                'end'           => $booking->end_datetime,
            ];
        }

            return  \Response::json([
                'events' => $events ?? null
            ]);
    }

html view

                 <div class="card mb-5 ">
                   <div id="calendar" style="height: 800px;"></div>
                 </div>

jquery

$(".butonSubmit").click(function(){

        if($(".carousel-item").hasClass('active') ){
            let room_id = $(".carousel-item.active").find('.room_id').val();

        $.ajax({
            url: "{{route('get-booking-slot')}}",
        type:"POST",
        data:{
            "_token": "{{ csrf_token() }}",
            room_id:room_id,
        },
        success:function(response){

            calendar.createSchedules(
            result = response.events
            );
            console.log(result);

        },
        error: function(response) {
            console.log(error);
        },
        });
    }
    });