javascript - 如果超过 x 秒没有点击某个其他 div，则显示 div

Question

我目前在 javascript 中有一个代码，目前可以很好地满足我的需求:

• 警告消息在 7 秒后首次出现
• 取消单击或触摸 div TARGET 时的警报

但我无法做到这一点:一旦用户点击了一个目标(该目标已经可以运行)，但随后我希望警告消息在每次用户未点击时重新出现。目标 div 超过 5 秒。

我将其改写得更清楚:我希望消息在 7 秒后首次出现，然后每次用户单击目标时，消息应该消失。但是，如果他在 .target 上点击的时间超过 5 秒，则该消息应该重新出现

如何做到这一点？

html

<section id="alert-msg" style="visibility: hidden"> 
  <div>my message</div>
</section>

Javascript

//1. message only appear after 7 sec
function showIt2() {
    document.getElementById("alert-msg").style.visibility = "visible";
  }
  setTimeout(showIt2, 7000); 

// 2. alert message disappear when .target div is clicked
  $('.target').on('click touchstart', function(){
    $("#alert-msg").remove();
  });

这是一个 jsfiddle:https://jsfiddle.net/111994re/3/

Answer 1

查看此修订版:https://jsfiddle.net/111994re/7/

我已经在你的 onclick 中添加了 setTimeout我已将可见性设置为隐藏而不是删除它(删除它你不能在那时取消隐藏它，你必须重新添加)

//1. message only appear after 7 sec
function showIt2() {
    document.getElementById("alert-msg").style.visibility = "visible";
  }
  setTimeout(showIt2, 7000); 

// 2. alert message disappear when .target div is clicked
  $('.target').on('click touchstart', function(){
    document.getElementById("alert-msg").style.visibility = "hidden";
    setTimeout(showIt2, 5000);
  });