隐藏div即使在重新加载页面jQuery之后也有一段时间

Question

有一个DIV，该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，但是由于您使用的是最简单的解决方案。

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>