即使重新加载页面jQuery后也会隐藏div几次

Question

在页面上滚动三分之一后会出现一个div。 里面有一个关闭按钮。 通过单击关闭按钮，即使重新加载页面后，div也将在接下来的10分钟内消失（出于测试目的，让时间为5秒）。 我不能为此正确编写jQuery。

这是我工作的摆弄 。 主要问题是重新加载页面后，如果单击关闭按钮后突然滚动，则会显示隐藏的div，而无需等待5秒钟。

 var closeOnce; var hide = localStorage.getItem('hide'); function showDiv() { if ($(window).scrollTop() > $('body').height() / 5) { $('#banner-message').slideDown(); } }; function countDown() { setTimeout(function(){ closeOnce = false; showDiv(); }, 5000); }; $('body').on('click', '.close', function() { $('#banner-message').slideUp(); closeOnce = true; localStorage.setItem('hide', 'true'); countDown(); }); $(window).on('scroll', function() { if(!hide) { if (!closeOnce) { showDiv() } } else { countDown(); } }); 

 body { background: #20262E; padding: 20px; font-family: Helvetica; } .instruction { background: #ccc; height: 600px; margin-bottom: 40px; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; display: none; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="instruction"> <h1>Scroll down to appear a div</h1> </div> <div id="banner-message"> <p>Hello World</p> <button class="close">close</button> </div> 

Answer 1

如果您不介意使用cookie，则可以安装jQuery cookie插件，并在单击关闭按钮时使用当前时间戳设置一个：

$('body').on('click', '.close', function() {
  $.cookie('closed', new Date().getTime());
});

然后滚动查看当前时间与单击按钮的时间之间的时差（如果有）

$(window).on('scroll', function() {
  var closeTime = $.cookie('closed');
  if (closeTime) {
    var diff = new Date().getTime() - closeTime;
    if (diff > 10 * 60 * 1000) {
      $.removeCookie('closed');
      // show div
    }
  }
});

我应该注意，您不需要此插件来设置/读取/删除cookie，但是由于您无论如何都使用jQuery，因此这是最简单的解决方案。

Answer 2

您已经使事情复杂化了，setTimeout不会记住刷新页面后的时间，它只会重新启动计时器，因此您需要将localStorage设置为隐藏时间，并与滚动显示的当前时间进行比较：

https://jsfiddle.net/vzatgnrm/9/

 //scroll function $(window).on('scroll', function() { //compare differene between hidden and current time, 5 seconds or if hidden time is null if(new Date().getTime() - localStorage.getItem("hiddenTime") > 5000 || localStorage.getItem("hiddenTime") == null) { if ($(window).scrollTop() > $('body').height() / 5) { $('#banner-message').slideDown(); } } }); //close button click $('body').on('click', '.close', function() { $('#banner-message').slideUp(); //set closed time to storage localStorage.setItem("hiddenTime", new Date().getTime()) }); 

 body { background: #20262E; padding: 20px; font-family: Helvetica; } .instruction { background: #ccc; height: 600px; margin-bottom: 40px; } #banner-message { background: #fff; border-radius: 4px; padding: 20px; font-size: 25px; text-align: center; transition: all 0.2s; margin: 0 auto; width: 300px; display: none; } button { background: #0084ff; border: none; border-radius: 5px; padding: 8px 14px; font-size: 15px; color: #fff; } #banner-message.alt { background: #0084ff; color: #fff; margin-top: 40px; width: 200px; } #banner-message.alt button { background: #fff; color: #000; } 

 <div class="instruction"> <h1>Scroll down to appear a div</h1> </div> <div id="banner-message"> <p>Hello World</p> <button class="close">close</button> </div>