Показывать всплывающее окно после пользователя на странице более 15 секунд

Question

Сделал небольшую логику, основанную на требовании. Старался изо всех сил, чтобы встретить ниже вопрос. Но, все еще поражен нижеследующей логикой.

Если посетитель мыши выходит из окна, покажите всплывающее окно (Это прекрасно работает)

Но нам нужно показывать только всплывающее окно, когда пользователь былна этой странице более 15 секунд и мышь за окном.

HTML

<div id="demo-fancybox-modal" data-delaytoshow="15">
  <div class="content">
    Demo Content
  </div>
  <button data-fancybox-close="" class="fancybox-close-small" title="Close"><svg class="icon-container"><use href="icons/symbols.svg#i-close" xlink:href="icons/symbols.svg#i-close"></use></svg></button>
</div>

JS:

var dataDelayToShow = component.attr('data-delaytoshow');
var cookieDelaySecond = dataDelayToShow * 1000;
setTimeout(function () {
  $.fancybox.open(component,{clickSlide: false});
}, cookieDelaySecond);


$(document).mouseleave(function () {
  $.fancybox.open($('#demo-fancybox-modal') ,{clickSlide: false});
});

Answer 1

Вы можете создать переменную времени в загрузке страницы. Всякий раз, когда пользователь покидает событие мыши, проверяет разницу во времени и показывает всплывающее окно.

$(document).ready(function() {
  var loadTime = new Date();
  $(document).mouseleave(function () {
    var leaveTime = new Date();
    var diff = leaveTime - loadTime;
    var sec = diff/1000;
    if(sec > 5){
      alert('Leaving after 5 seconds')
    }
    loadTime = new Date();
  });

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 2

попробуйте решение ниже.

var time = 0;
var dataDelayToShow = 15;

$(document).ready(function(){

var cookieDelaySecond = dataDelayToShow * 1000;


setInterval(function () {
   
 time = time + 1;
}, 1000);
})

$(document).mouseleave(function () {
if(time >= dataDelayToShow)
{
  time= 0;
  alert("your code")
 }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="demo-fancybox-modal" data-delaytoshow="15">
  <div class="content">
    Demo Content
  </div>
  <button data-fancybox-close="" class="fancybox-close-small" title="Close"><svg class="icon-container"><use href="icons/symbols.svg#i-close" xlink:href="icons/symbols.svg#i-close"></use></svg></button>
</div>

Answer 3

Вам не нужно время для этого. Вы можете хранить время где-то на странице загрузки. Затем, когда пользователь покидает окно, сравните текущее время с сохраненным и, если оно более 15 секунд, откройте всплывающее окно, в противном случае не делайте этого.