如何在jQuery UI Sortable中实现拼图游戏的计时器功能？

问题根源在于你之前的代码（即使注释）如果直接将setInterval写在Sortable初始化配置中，页面加载时Sortable初始化就会执行这段代码，导致计时器自动启动。正确做法是在拖拽元素进入#puzzle-container或点击开始按钮这两个特定事件触发时，再启动计时器，同时要避免重复启动。

具体修复步骤： #

1. 初始化计时器状态变量
   先定义合适作用域内的intervalID，初始为null，用来追踪计时器是否在运行：

   let intervalID = null;
   

2. 封装启动计时器的函数
   写一个统一的启动函数，加入判断逻辑，确保计时器未运行时才启动，避免重复调用导致计时加速：

   function startTimer() {
     if (!intervalID) {
       intervalID = setInterval(timer, 1000);
     }
   }
   

3. 绑定Sortable的拖拽接收事件
   在Sortable配置中添加receive事件，当元素被拖入容器时，判断目标容器是否为#puzzle-container，是则启动计时器：

   $('.image-box').sortable({
     connectWith: '#piece-container, #puzzle-container',
     containment: '#puzzle-container',
     receive: function(event, ui) {
       // 确认当前容器是目标拼图容器
       if ($(this).attr('id') === 'puzzle-container') {
         startTimer();
       }
     }
   });
   

4. 绑定开始按钮的点击事件
   给开始按钮添加点击事件，触发计时器启动：

   // 假设你的开始按钮ID是start-button
   $('#start-button').on('click', startTimer);
   

可选：添加停止计时器的函数 #

如果需要在拼图完成时停止计时，可以封装停止函数：

function stopTimer() {
  if (intervalID) {
    clearInterval(intervalID);
    intervalID = null;
  }
}

内容的提问来源于stack exchange，提问作者Nadia Den