发起新Ajax请求时终止旧请求：Toast TUI日历重复响应问题

问题根源 #

你每次调用calendar.createSchedules()时，TUI Calendar是把新日程追加到现有日历里，而非替换已有内容。所以多次用相同参数请求时，旧的日程不会被自动清除，最终导致新旧数据叠加显示。

解决办法 #

在添加新日程前，先清除对应的数据，有两种可选方案：

方案1：清空所有日程（简单直接） #

修改jQuery的success回调逻辑，先清空日历里的所有现有日程，再添加新数据：

success:function(response){
    // 先清空日历全部日程
    calendar.clear();
    // 再加载新的日程数据
    calendar.createSchedules(response.events);
    console.log(response.events);
},

方案2：精准清除对应房间的日程（更灵活） #

如果需要保留其他房间的日程，只清除当前房间的旧数据，可以这么做：

1. 先调整控制器代码，把日程的calendarId设为房间ID（方便后续筛选）：

public function getBookingSlot(Request $request){
    $userBookings = Booking::where('room_id',$request->room_id)->where('booking_status',1)->get();
    $events = []; // 提前初始化数组，避免无数据时出现未定义问题
    foreach($userBookings as $booking){
        $events[]  = [
            'id'            => $booking->id,
            'calendarId'    => $request->room_id, // 改为当前房间ID，用于后续筛选
            'title'         => 'Booked',
            'category'      => 'time',
            'dueDateClass'  => '',
            'start'         => $booking->start_datetime,
            'end'           => $booking->end_datetime,
        ];
    }

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

2. 再修改jQuery代码，筛选并删除当前房间的旧日程：

success:function(response){
    let room_id = $(".carousel-item.active").find('.room_id').val();
    // 筛选出当前房间的所有日程ID
    const targetScheduleIds = calendar.getSchedules().filter(schedule => schedule.calendarId == room_id).map(schedule => schedule.id);
    // 删除这些旧日程
    if(targetScheduleIds.length > 0){
        calendar.deleteSchedules(targetScheduleIds);
    }
    // 添加新日程
    calendar.createSchedules(response.events);
    console.log(response.events);
},

额外优化提示 #

• 控制器里提前初始化$events = []，避免没有预订数据时出现变量未定义的报错。
• 可以给按钮添加点击锁，比如点击后暂时禁用按钮，避免用户重复触发请求。

内容的提问来源于stack exchange，提问作者zubair syslab