Я хочу решить задачу.
У меня есть баннеры которые появляются с определенной периодичностью.
Данные которых записываются в локал сторедж.
Для того чтобы на следующей странице не показывать баннер который уже был показан.
Но проблема в том что баннер показывается на следующий странице с задержкой которая указана у него а не с ноля.
Например на одной странице показано 3 баннера = это 3 сек
Мне нужно сделать так чтобы при переходе на следующую страницу 4тый баннер начинал показываться сразу а не с 4ой сек а сразу при загрузке страницы.
Помогите пожалуйста. Спасибо.
let item = $(".some__item");
item.each(function() {
var time = $(this).data('delay') * 1000;
var timeclose = time + 10000;
var itemId = $(this).data('id');
if (!localStorage.getItem(itemId)) {
setTimeout(() => {
$(this).fadeIn();
localStorage.setItem(itemId, time);
}, time);
setTimeout(() => {
$(this).fadeOut();
}, timeclose);
}
})
.some__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-shadow: 0px 3px 32px 0px rgb(0 0 0 / 5%);
box-shadow: 0px 3px 32px 0px rgb(0 0 0 / 5%);
align-items: center;
background-color: #438842;
padding: 15px 45px;
padding-left: 10px;
position: relative;
margin-top: 15px;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="some__item" style="background-color: rgb(231, 161, 85); display: none;" data-delay="1" data-id="3123">Banner1</div>
<div class="some__item" style="background-color: rgb(231, 161, 85); display: none;" data-delay="2" data-id="3124">Banner2</div>
<div class="some__item" style="background-color: rgb(231, 161, 85); display: none;" data-delay="3" data-id="3125">Banner3</div>
<div class="some__item" style="background-color: rgb(231, 161, 85); display: none;" data-delay="4" data-id="3126">Banner4</div>
<div class="some__item" style="background-color: rgb(231, 161, 85); display: none;" data-delay="5" data-id="3127">Banner5</div>