根据 setTimeout/Button Click 使用 Javascript 打开弹出窗口/模式答案

【问题标题】：Open popup/modal depending on setTimeout/Button Click using Javascript根据 setTimeout/Button Click 使用 Javascript 打开弹出窗口/模式
【发布时间】：2021-09-09 21:01:35
【问题描述】：

我在同一个网页上有 2 个弹出窗口。

当有人点击“立即购买”链接时，应该会打开“立即购买提醒”。而且我知道这与 onclick 事件配合得很好。
当用户在 X 秒内没有点击“立即购买”按钮（在我的示例中我用了 5 秒），则应该会出现“反馈弹出窗口”警报。我使用 setTimeout 来显示弹出窗口，但如果有人已经点击了“立即购买”链接，我不希望显示“反馈弹出窗口”。

现在，如果我点击“立即购买”，我会收到“立即购买提醒”，也会收到“反馈弹出窗口”提醒。

我只想根据我的操作显示一个弹出窗口 -> 如果我点击“立即购买”，则点击“立即购买”提醒，如果我不点击“立即购买”链接，则默认情况下为“反馈弹出提醒”

如何在单击“立即购买”按钮时停止显示“反馈弹出窗口”？感谢帮助（注意：我尝试了 clearInterval 但没有运气：'（）

function func1() {
  alert("Buy Now Popup");
}

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

window.onload = function () {
  setTimeout(function () {
    alert("Feedback Popup");
  }, 5000);
};

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

<div>
  <a href="#" class="modalButton" data-popup="popupOne" onclick="func1()">Model Popup</a>
</div>

【问题讨论】：

请您分享一个显示此问题的minimal reproducible example 吗？
当然谢谢，让我进行编辑！ @evolutionxbox

标签： javascript

【解决方案1】：

这是你所描述的一个小例子。

不点击按钮5秒后会出现蓝色背景，但每次点击按钮都会重置时间。

var btnTimeout = null;

function resetTimeout(){
  btnTimeout = setTimeout(() => {
    // do whatever you want to do when time comes
    document.body.style.background = "blue";
  }, 5 * 1000); // example of 5 seconds for faster response (change to 60)
}

function doSomething(){
  if(btnTimeout){
    clearTimeout(btnTimeout);    
  }
  
  resetTimeout();

  // do whatever you want to do when click the btn
  document.body.style.background = "red";
}

resetTimeout();

&lt;button onclick="doSomething()"&gt;Buy now (prevent blue from showing)&lt;/button&gt;

【讨论】：