点击按钮后根据变量匹配状态加载图片或GIF的Ajax实现问题

你的核心问题在于当前的Ajax逻辑仅在按钮点击时发起单次请求（或仅递归一次），后端集合更新后前端没有持续检测的机制，因此无法自动切换到对应图片。咱们可以通过定时轮询来解决这个问题，让前端每隔一段时间主动检查后端状态，直到匹配成功为止。

具体修改方案 #

1. 引入定时器管理 #

首先定义一个变量保存定时器ID，这样可以在匹配成功或用户点击新按钮时清除旧定时器，避免多请求冲突。

2. 重构checkAjax函数 #

把原有的递归调用改成定时请求逻辑，匹配成功后停止轮询，未匹配则继续检测：

$(document).ready(function() {
  // 保存定时器ID，用于后续清除轮询
  let pollTimer = null;

  function checkAjax(id, tmax, tid, pid) {
    $.ajax({
      url: '../tmax',
      type: 'POST',
      data: { id: id, tmax: tmax, tid: tid, pid: pid },
      success: function(response) {
        // 统一隐藏滑块元素
        $("#sliderA, #sliderB, #sliderC").hide();
        
        if (second == tmax) {
          // 匹配成功：渲染数据并停止轮询
          $("#tmaxsecsdata").html(response);
          if (pollTimer) {
            clearInterval(pollTimer);
            pollTimer = null;
          }
        } else {
          // 未匹配：显示加载GIF，轮询继续
          const loadinggif = "<img src='loader.gif' class='img-responsive'>";
          $("#tmaxsecsdata").html(loadinggif);
        }
      },
      error: function() {
        console.log("Error fetching data");
        // 请求出错时停止轮询，避免无效请求持续发送
        if (pollTimer) {
          clearInterval(pollTimer);
          pollTimer = null;
        }
      }
    })
  }

  $(" .secs li a").on("click", function(e) {
    e.preventDefault();
    // 点击新按钮前，先清除之前的轮询任务
    if (pollTimer) {
      clearInterval(pollTimer);
      pollTimer = null;
    }

    const id = $(this).data("jsonid");
    const tmax = $(this).data("sec"); // 注意：原代码用了data("secs")，但HTML里是data-sec，需修正为data("sec")
    const tid = $(this).data("tid");
    const pid = $(this).data("pid");

    // 先发起一次即时请求，再启动定时轮询（间隔可根据需求调整）
    checkAjax(id, tmax, tid, pid);
    pollTimer = setInterval(() => {
      checkAjax(id, tmax, tid, pid);
    }, 30000); // 30秒轮询一次，可根据后端更新频率调整
  })
})

3. 关键注意事项 #

• 定时器间隔：示例中用30秒作为轮询间隔，你可以根据后端更新的实际频率调整，比如缩短到10秒，但不要设置过短，避免给服务器造成不必要的压力。
• 数据属性修正：原代码中$(this).data("secs")与HTML的data-sec不匹配，需改为$(this).data("sec")，否则无法获取正确的tmax值，这可能也是之前逻辑异常的潜在原因。
• 资源清理：用户点击新按钮时必须清除旧定时器，否则多个按钮的轮询任务会同时运行，导致请求混乱。

方案原理 #

通过setInterval定时发起Ajax请求，前端会持续检测后端second变量与按钮data-sec值是否匹配。一旦后端集合更新、两者相等时，就会自动渲染对应图片并停止轮询，完美解决当前无法自动切换的问题。

内容的提问来源于stack exchange，提问作者Ashok Charu