即使在重新加载页面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，所以这是最简单的解决方案。

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>