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

Question

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

• 警报消息在 7 秒后首次出现
• 当点击或触摸 div TARGET 时移除警报

但我没有做到这一点：一旦用户点击了一个目标（这已经是可操作的），但我希望在之后再次出现警报消息，每次用户没有点击时。目标 div 超过 5 秒。

我重新措辞更清楚：我希望消息在 7 秒后首先出现，然后每次用户单击.target 时，消息应该消失。但是，如果他在 .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);
  });

Answer 2

那里有些打字错误

//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();
});

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

Answer 3

https://jsfiddle.net/111994re/10/

   //1. message only appear after 7 sec
function showIt2() {
    $("#alert-msg").show();
  }
  setTimeout(showIt2, 7000); 

// 2. alert message disappear when .target div is clicked
  $('.target').on('mousedown touchstart', function(){
  $("#alert-msg").hide(); 
    clearTimeout(this.downTimer);

  }).on("mouseup touchstop", function(e) {
    this.downTimer = setTimeout(function() {

          showIt2();
    }, 5000);
});

Answer 4

好的，现在，警报会在 x 秒后出现。然后，如果用户单击目标，计时器会重置，并且在 x 秒后无限期地再次出现警报。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<section id="alert-msg"> 
    <div style="display:none;">Alert!</div>
</section>

<div class="target">Target</div>

<script type="text/javascript">
//1. message only appear after 7 sec
function showIt2() {
    if( $('#alert-msg') ){
        $('#alert-msg div').fadeOut();
        $('#alert-msg div').fadeIn();
    }
  }
  var show = setInterval(showIt2, 5000); 

// 2. alert message disappear when .target div is clicked
  $('.target').on('click touchstart', function(){
    $("#alert-msg div").hide();
    clearInterval(show);
    show = setInterval(showIt2, 5000); 
  });
</script>