Show popup after user in the page more than 15 seconds

Question

Did a small logic based on the requirement. Tried my best to meet below issue. But, still Struck with below logic.

If the visitor mouse out of window, show popup (This works fine)

But, we need to show popup only, when user was in this page more than 15 seconds and mouse out of window.

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

You can create a time variable in the page load. Whenever the user do mouse leave event check the time difference and show the popup.

$(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>