JQuery按钮二次点击显示历史消息及Spinner不显示问题求助

嘿，我看到你遇到的问题了——第一次触发功能一切正常，但第二次点击按钮时，旧消息赖着不走，spinner也不出来，虽然轮询其实在后台跑。咱们来拆解下问题根源，然后给你修复方案：

核心问题点 #

1. 定时器管理错误：你用clearTimeout(doPoll)来停止轮询，但setTimeout返回的是一个定时器ID数字，不是函数本身。直接传函数进去完全无效，导致第一次轮询的定时器没被真正清除，第二次点击时新旧轮询同时运行，互相干扰DOM更新。
2. 并发请求冲突：第二次点击按钮时，之前的轮询回调还在排队执行，它们会把旧内容重新塞回#progressSend，让你误以为旧消息没消失；同时旧回调会错误地隐藏spinner，让你觉得轮询没启动。
3. AJAX与轮询的DOM操作冲突：按钮点击时同时触发了doPoll()和另一个独立AJAX请求，两者都会操作spinner和进度容器，比如AJAX的success回调会提前隐藏spinner，打断轮询的视觉反馈。

修复后的代码 #

我调整了代码，主要做了这些改进：

• 用变量保存定时器ID，确保能正确清除旧轮询
• 点击按钮时先强制清除所有旧轮询，避免并发冲突
• 统一DOM初始化逻辑，确保每次点击都能重置状态
• 调整AJAX和轮询的逻辑，避免两者互相干扰
• 增加轮询请求失败的处理，防止异常时卡住

$(document).ready(function () { 
  $("#spinner").hide(); 
  let pollTimer = null; // 保存定时器ID，用于精准清除轮询

  function doPoll() { 
    $("#progressSend").empty(); // 清空进度容器
    $("#spinner").show(); 
    $.post("/pathtopolling", function (data) { 
      if (data.startsWith("Completed")) { 
        $("#progressSend").html("<p class='text-info'>" + data + "</p>"); 
        $("#spinner").hide(); 
        clearTimeout(pollTimer); // 用保存的ID清除定时器
        pollTimer = null;
      } else if (data.startsWith("Unable")) { 
        $("#progressSend").html("<p class='text-info'>" + data + "</p>"); 
        $("#spinner").hide(); 
        clearTimeout(pollTimer);
        pollTimer = null;
      } else { 
        $("#progressSend").html("<p class='text-info'>" + data + "</p>"); 
        pollTimer = setTimeout(doPoll, 500); // 把定时器ID存起来，方便后续清除
      } 
    }).fail(function() {
      // 处理轮询请求失败的情况，避免无限等待
      $("#progressSend").html("<p class='text-danger'>轮询请求失败，请重试</p>");
      $("#spinner").hide();
      clearTimeout(pollTimer);
      pollTimer = null;
    }); 
  } 

  var form = $("#frmSendMailingList"); 
  $(form).on("click", function (event) { 
    event.preventDefault(); 

    // 点击按钮时先清除所有旧的轮询，避免并发冲突
    if (pollTimer) {
      clearTimeout(pollTimer);
      pollTimer = null;
    }

    // 重置DOM状态，确保界面回到初始等待状态
    $("#spinner").show(); 
    $("#progressSend").empty(); 

    // 先触发主AJAX请求，再启动轮询（顺序可根据业务调整）
    jQuery.ajax({ 
      type: "POST", 
      url: $(form).attr("action"), 
      data: $(form).serialize(), 
      dataType: "json", 
      cache: false, 
      async: true, 
      success: function(result) { 
        // 主请求成功后，轮询会处理后续进度，这里仅补充提示
        $("#progressSend").append("<p class='text-info'>" + result + "</p>"); 
      }, 
      error: function(err) { 
        $("#spinner").hide(); 
        $("#progressSend").html("<p class='text-danger'>请求失败，请重试</p>"); 
        // 请求失败时也要清除轮询
        if (pollTimer) {
          clearTimeout(pollTimer);
          pollTimer = null;
        }
      } 
    }); 

    // 启动轮询
    doPoll(); 
  }); 

  $("#btnMailingListReset").click(function () { 
    // 重置前先清除轮询，避免页面刷新后还有残留请求
    if (pollTimer) {
      clearTimeout(pollTimer);
      pollTimer = null;
    }
    location.reload(true); 
  }); 
}); 

额外优化建议 #

• 把HTML字符串里的转义字符（比如<）换成正常的<，代码更易读
• 可以在按钮点击时禁用按钮，直到操作完成，避免用户重复点击
• 轮询间隔可以根据服务器压力适当调整，不要太频繁

内容的提问来源于stack exchange，提问作者Paul Thompson