FULLCALENDAR更新事件无限循环及复选框过滤事件异常问题求解

• 首先确认是否为真的无限循环：你代码中else分支打印的infinite loop会在每一张dueDate小于等于当前日期的卡片遍历时输出一次，如果打印次数和你总过期卡片数量一致，属于正常遍历输出，不是死循环。
• 若确认为死循环，排查两个核心点：
  • 检查cards数组是否存在循环引用，比如某个卡片的属性指向数组本身导致遍历无法终止
  • 确认没有其他日历回调（如eventAdd、eventsSet等）在事件更新时重复调用get_events形成递归调用

该问题由多个代码错误叠加导致，按以下步骤修复：

1. 修复HTML复选框的value多余空格
   将你的复选框代码中value属性末尾的空格删除：

   <!-- 原错误代码 -->
   <input type="checkbox" id="check<?= $board->get_id() ?>" name="check" class="check" value="<?= $board->get_id() ?> ">
   <!-- 修改后 -->
   <input type="checkbox" id="check<?= $board->get_id() ?>" name="check" class="check" value="<?= $board->get_id() ?>">
   

   带空格的board id传到后端后无法匹配到对应数据，会导致后端返回空卡片数组，表现为所有事件被清空。

2. 优化复选框点击事件的取值逻辑
   你已经通过document.querySelectorAll(".check:checked")筛选出所有勾选的复选框，不需要再在循环中重复判断checkbox.checked，调整后的代码如下：

   $(".check").click(function(){
     const checklist = Array.from(document.querySelectorAll(".check:checked")).map(checkbox => checkbox.value.trim());
     getNewCards(checklist); 
   });
   

3. 优化get_events的事件更新逻辑
   不需要手动清空事件再逐个添加，直接调用FullCalendar提供的配置更新方法即可，逻辑更简洁也避免出错：

   function get_events(){
     const currentDate = '<?=date("Y-m-d")?>';
     // 过滤有效卡片并生成日历事件格式
     const eventList = cards.filter(card => !!card).map(card => ({
       title : card.title,
       start : card.dueDate,
       color: card.dueDate > currentDate ? "green" : '#' + card.BoardID + card.BoardID + card.BoardID,
       textColor: card.dueDate > currentDate ? undefined : 'red',
     }));
     // 批量更新日历事件
     calendar.setOption('events', eventList);
   }
   

4. 确认后端接口逻辑
   确保calendar/test接口接收到boards数组参数后，返回的卡片数据格式和初始加载的$cards_json格式完全一致，避免前端解析失败。

内容的提问来源于stack exchange，提问作者Luca Li