使用JavaScript实现点击/setTimeout触发对应弹窗，如何避免重复弹出？

问题根因 #

• 定时器清除方法误用：setTimeout() 创建的是单次超时定时器，需使用 clearTimeout() 清除，clearInterval() 仅适用于清除 setInterval() 创建的循环定时器，因此之前操作无效。
• 未存储定时器标识：setTimeout() 执行后会返回唯一的数字ID，需要将该ID存储到全局可访问的变量中，才能在点击事件中指定需要清除的定时器。

修改后的完整代码 #

JS代码 #

// 全局变量存储反馈弹窗的定时器ID
let feedbackTimeoutId = null;

function func1(e) {
  // 点击后先清除超时定时器，阻止反馈弹窗触发
  clearTimeout(feedbackTimeoutId);
  alert("Buy Now Popup");
  // 可选：阻止a标签默认跳转页面顶部的行为
  e.preventDefault();
}

const popup = document.querySelector(".popup");

window.onload = function () {
  // 存储定时器ID到全局变量
  feedbackTimeoutId = setTimeout(function () {
    alert("Feedback Popup");
  }, 5000);
};

HTML代码 #

<header>
  <h1>Modal Popup</h1>
</header>

<div>
  <!-- 传入事件对象给func1 -->
  <a href="#" class="modalButton" data-popup="popupOne" onclick="func1(event)">Buy Now</a>
</div>

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