javascript - 即使重新加载页面 jQuery 后也会隐藏 div 一些时间

Question

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

这是fiddle of my work 。主要问题是重新加载页面后，如果我在单击关闭按钮后突然滚动，隐藏的 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 plugin并在单击关闭按钮时使用当前时间戳设置一个:

$('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，所以这是最简单的解决方案。